Button

About #

Built with Reakit for a better accessibility 🥰

Variants #

Basics #

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Box backgroundColor="nude.700" display="inline" px="sm" py="xxl">
  <Button variant="tertiary-negative">Tertiary negative</Button>
</Box>
<Button variant="quaternary">Quaternary</Button>
Copy

States #

<Button variant="primary-success">Primary success</Button>
<Button variant="primary-warning">Primary warning</Button>
<Button variant="primary-danger">Primary danger</Button>
<Button variant="primary-info">Primary info</Button>
<Button variant="secondary-success">Secondary success</Button>
<Button variant="secondary-warning">Secondary warning</Button>
<Button variant="secondary-danger">Secondary danger</Button>
<Button variant="secondary-info">Secondary info</Button>
Copy

Formats #

Use size property with xs, sm, md(default), lg or xl.

<Button size="xs">Tiny</Button>
<Button size="sm">Small</Button>
<Button>Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">XLarge</Button>
Copy

Disabled #

All disabled buttons have the same style.

<Button variant="primary-danger" disabled>
  Disabled
</Button>
Copy

With icons #

<Button>
  <EarthIcon />
  <span>Button</span>
</Button>
<Button variant="secondary">
  <EarthIcon />
  <span>Button</span>
</Button>
<Button variant="tertiary">
  <EarthIcon />
  <span>Button</span>
</Button>
<Button disabled>
  <EarthIcon />
  <span>Button</span>
</Button>
Copy

Shape #

You can set a cirle or square shape with w & h to have buttons pefect for icons.

<Button shape="square" size="xs">
  <EarthIcon size="xs" />
</Button>
<Button shape="circle" size="xs">
  <EarthIcon size="xs" />
</Button>
<Button shape="square" size="sm">
  <EarthIcon size="sm" />
</Button>
<Button shape="circle" size="sm">
  <EarthIcon size="sm" />
</Button>
<Button shape="square">
  <EarthIcon />
</Button>
<Button shape="circle">
  <EarthIcon />
</Button>
<Button shape="square" size="lg">
  <EarthIcon size="lg" />
</Button>
<Button shape="circle" size="lg">
  <EarthIcon size="lg" />
</Button>
<Button shape="square" size="xl">
  <EarthIcon size="xl" />
</Button>
<Button shape="circle" size="xl">
  <EarthIcon size="xl" />
</Button>
Copy

Transform to a link #

You can transform your Button component with as property to add you linker, href or to... all that you want.

<Button as="a" href="https://www.welcometothejungle.com" target="_blank" rel="noopener nofollow">
  <SunIcon />
  <span>Welcome</span>
</Button>
Copy

Width #

You can add w property from xstyled.

<Button w="100%">full width</Button>
<Button w={1 / 2}>half width</Button>
Copy

Radius #

You can add borderRadius property from xstyled.

<Button>default</Button>
<Button borderRadius="10px">10px</Button>
Copy

ButtonGroup #

See documentation from ButtonGroup component.

Properties #

Packages #

Dependencies #

Peer dependencies #