Skip to main content

Button

Component for every call-to-action.

Figma componentStorybook documentation
<Button>Button</Button>

Props​

Component​

Change the HTML tag of the component or use another component.

AnchorReact component
<Button>Button</Button>
<Button component="a">Anchor</Button>
<Button component={Link}>React component</Button>

Kind​

Set the type of content.

<Button>Text</Button>
<Button kind="icon">{/* insert icon */}</Button>

Variant​

Change the button style.

<Button>Fill</Button>
<Button variant="stroke">Stroke</Button>
<Button variant="transparent">Transparent</Button>

Size​

<Button size="xs">Xsmall</Button>
<Button size="sm">Small</Button>
<Button>Medium</Button>
<Button size="lg">Large</Button>

Color​

<Button>Primary</Button>
<Button color="secondary">Secondary</Button>

<Button color="success">Success</Button>
<Button color="info">Info</Button>
<Button color="warning">Warning</Button>
<Button color="error">Error</Button>

<Button color="grey">Grey</Button>
<Button color="main">Main</Button>
<Button color="contrast">Contrast</Button>

FullWidth​

<Button fullWidth>Full width</Button>

Disabled​

<Button disabled>Disabled</Button>

Icons​

<Button iconLeft={{/* insert icon */}}>Icon left</Button>
<Button iconRight={{/* insert icon */}}>Icon right</Button>