WUI logo

Button

Allows user to take actions or event, and make choices.

version

4.2.0

install

yarn add @welcome-ui/button

usage

import { Button } from '@welcome-ui/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>
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>

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>

Disabled #

All disabled buttons have the same style.

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

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>

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>

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>

Width #

You can add w property from xstyled.

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

Radius #

You can add borderRadius property from xstyled.

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

ButtonGroup #

See documentation from ButtonGroup component.

Properties #

NameType(s)DefaultRequired
disabled
Boolean
size
"xs"
"sm"
"md"
"lg"
"xl"
md
variant
"disabled"
"primary"
"secondary"
"tertiary"
"primary-info"
"secondary-info"
"primary-success"
"secondary-success"
"tertiary-negative"
"quaternary"
"primary-warning"
"secondary-warning"
"primary-danger"
"secondary-danger"
primary
shape
"circle"
"square"

Packages #

Dependencies #
Peer dependencies #

Previous

Stack