WUI logo

Button

Allows user to take actions or event, and make choices.

version

5.0.0-alpha.16

install

yarn add @welcome-ui/button

usage

import { Button } from '@welcome-ui/button'

About #

Built with Reakit for a better accessibility 🥰

Variants #

Basics #
States #

Formats #

Use size property with xxs, xs, sm, md (default) or lg.

Disabled #

All disabled buttons have the same style.

With icons #

Shape #

You can set a cirle or square shape with w & h to have buttons perfect for icons.

You can transform your Button component with as property to add you linker, href or to... all that you want.

Width #

You can add w property from xstyled.

Radius #

You can add borderRadius property from xstyled.

ButtonGroup #

See documentation from ButtonGroup component.

Properties #

NameType(s)DefaultRequired
disabled
Boolean
size
"xxs"
"xs"
"sm"
"md"
"lg"
md
variant
"disabled"
"primary"
"secondary"
"tertiary"
"primary-info"
"secondary-info"
"primary-success"
"secondary-success"
"ghost"
"primary-warning"
"secondary-warning"
"primary-danger"
"secondary-danger"
primary
shape
"circle"
"square"

Packages #

Dependencies #
Peer dependencies #

Previous

Stack