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