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
You can set a cirle
or square
shape with w
& h
to have buttons pefect for icons.
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 w
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^3.0.0-alpha.2
- - @welcome-ui/utils^3.0.0-alpha.2
- - reakit^1.3.4
Peer dependencies
- - @xstyled/styled-components^2.1.0
- - @xstyled/system^2.1.0
- - react^16.10.2 || ^17.0.1
- - react-dom^16.10.2 || ^17.0.1
- - styled-components^5.0.0