Button

A button component that can be used to trigger actions.

API reference

Prop	Type	Default	Responsive
variant	primarysecondary	primary	Yes
size	smallmedium	medium	Yes
className	string	-	No
style	CSSProperties	-	No

Examples

Variants

Here's a view when buttons have different variants.

<Flex align="center">
  <Button iconStart="cloud" variant="primary">
    Button
  </Button>
  <Button iconStart="cloud" variant="secondary">
    Button
  </Button>
  <Button iconStart="cloud" variant="tertiary">
    Button
  </Button>
</Flex>

Sizes

Here's a view when buttons have different sizes.

<Inline alignY="center">
  <Button size="small">Small</Button>
  <Button size="medium">Medium</Button>
</Inline>

With Icons

Here's a view when buttons have icons.

<Inline alignY="center">
  <Button iconStart="cloud">Button</Button>
  <Button iconEnd="chevronRight">Button</Button>
  <Button iconStart="cloud" iconEnd="chevronRight">Button</Button>
</Inline>

Full width

Here's a view when buttons are full width.

<Flex style={{ width: '300px' }}>
  <Button fullWidth>Full width</Button>
</Flex>

Disabled

Here's a view when buttons are disabled.

<Button disabled>Button</Button>

Responsive

Here's a view when buttons are responsive.

<Button variant={{ initial: 'primary', lg: 'secondary' }}>
  Responsive Button
</Button>