Button
Allows user to take actions or event, and make choices.
version
4.1.2
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>
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>
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 #
Name | Type(s) | Default | Required |
---|---|---|---|
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
StackNext
ButtonGroup