Button

Buttons are controls that let users take action, make choices, and move forward.

<Button label="Button" />

Variants

The Button comes with four variants: primary (default), accent, secondary, and ghost.

<Button label="Primary" variant="primary" />
<Button label="Accent" variant="accent" />
<Button label="Secondary" variant="secondary" />
<Button label="Ghost" variant="ghost" />

Size

The Button comes with 5 sizes: 32, 36, 40 (default), 44, and 48.

<Button label="Button 32" size={32} />
<Button label="Button 36" size={36} />
<Button label="Button 40" size={40} />
<Button label="Button 44" size={44} />
<Button label="Button 48" size={48} />

Icons

You can place icons before the label (iconStart), after the label (iconEnd), or use an icon as the button label when the action is clearly represented by the icon.

You don't need to explicitly set the icon size. Icons inherit the correct sizing from the Button component by default.

<Button iconEnd={<IconPlusOutline18 />} iconStart={<IconPlusOutline18 />} label="Button" />

Disabled

Use the disabled prop to prevent a button from being interacted with. Disabled buttons communicate that an action is currently unavailable.

<Button disabled label="Disabled" variant="primary" />
<Button disabled label="Disabled" variant="accent" />
<Button disabled label="Disabled" variant="secondary" />
<Button disabled label="Disabled" variant="ghost" />

Loading

Use the loading prop to indicate that an action is in progress. While loading, the button shows a spinner and cannot be interacted with.

Do not add disabled when using loading, as the button is automatically non-interactive while loading.

<Button label="Loading" loading variant="primary" />
<Button label="Loading" loading variant="accent" />
<Button label="Loading" loading variant="secondary" />
<Button label="Loading" loading variant="ghost" />

Full width

Use the fullWidth prop to make the button expand to the full width of its container.

<Button fullWidth label="Full width" />

Rounded

Use the rounded prop to give the button fully rounded corners.

<Button label="Rounded" rounded variant="primary" />
<Button label="Rounded" rounded variant="accent" />
<Button label="Rounded" rounded variant="secondary" />
<Button label="Rounded" rounded variant="ghost" />

Button link

Use the ButtonLink component to create a link that looks like a button. It renders an <a> element by default.

<ButtonLink
  href="https://www.example.com"
  label="Button Link"
  rel="noopener noreferrer"
  target="_blank"
/>

Use the as prop to render a custom link component, such as your router's Link.

<ButtonLink as={Link} label="Home" to="/" />