Button
Built with Reakit for a better accessibility 🥰
Install and import
Variants
Basics
States
Formats
Use size property with xs
sm
md
(default) lg
or xl
.
Disabled
All disabled buttons have the same style.
With icons
Shape
Get same size on width
and height
, can have a 'circle' or 'square' shape
.
Transform to a link
You can transform your Button component with as
property to add you linker, href
or to
... all that you want.
Width
You can add width
property from xstyled.
Radius
You can add borderRadius
property from xstyled.
Group Buttons
See documentation from Group component.
Properties
Name | Type(s) | Default | Required |
---|---|---|---|
as | union | ||
children | node | ||
disabled | bool | ||
shape | square circle | ||
size | xs sm md lg xl | md | |
variant | primary secondary tertiary tertiary-negative quaternary primary-warning secondary-warning primary-danger secondary-danger | primary |
Dependencies
- - @welcome-ui/system^2.0.2
- - @welcome-ui/utils^2.0.2
- - reakit^1.1.1
Peer dependencies
- - @xstyled/styled-components^1.17.0
- - @xstyled/system^1.17.0
- - react^16.10.2
- - react-dom^16.10.2
- - styled-components^4.0.0 || ^5.0.0