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.

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 #

NameType(s)DefaultRequired
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 #

Peer dependencies #