Button

v2.0.2
duplicate

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

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