Button

Last updated on March 17, 2026 at 6:27 AM

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

Storybook

Figma

GitHub

Usage

<Button>Button</Button>

Variants

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

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

<Button isIconOnly variant="accent">
  <IconPlus />
</Button>
<Button isIconOnly variant="primary">
  <IconPlus />
</Button>
<Button isIconOnly variant="secondary">
  <IconPlus />
</Button>
<Button isIconOnly variant="ghost">
  <IconPlus />
</Button>

Size

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

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

<Button isIconOnly size={32}>
  <IconPlus />
</Button>
<Button isIconOnly size={36}>
  <IconPlus />
</Button>
<Button isIconOnly size={40}>
  <IconPlus />
</Button>
<Button isIconOnly size={44}>
  <IconPlus />
</Button>
<Button isIconOnly size={48}>
  <IconPlus />
</Button>

Icons

You can place icons before the label (iconStart), after the label (iconEnd), or use an icon-only (isIconOnly) button 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={<IconPlus />}
  iconStart={<IconPlus />}
>
  Button
</Button>

<Button isIconOnly variant="ghost">
  <IconPlus />
</Button>

Disabled

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

<Button isDisabled>Disabled</Button>

<Button isDisabled isIconOnly>
  <IconPlus />
</Button>

Loading

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

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

<Button isLoading>Loading</Button>

<Button isIconOnly isLoading>
  <IconPlus />
</Button>

Full width

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

<Button isFullWidth>Full width</Button>

Rounded

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

<Button isRounded>Rounded</Button>

<Button isIconOnly isRounded>
  <IconPlus />
</Button>

Active

Use the isActive prop to indicate a pressed or selected state.

<Button variant="accent">Inactive</Button>
<Button isActive variant="accent">Active</Button>

<Button variant="primary">Inactive</Button>
<Button isActive variant="primary">Active</Button>

<Button variant="secondary">Inactive</Button>
<Button isActive variant="secondary">Active</Button>

<Button variant="ghost">Inactive</Button>
<Button isActive variant="ghost">Active</Button>

Button link

Use ButtonLink when navigation should visually appear as a button. It behaves like a link while keeping button styling.

Use href for standard links, or as to render it with a routing component such as Link.

Example NextLink

<ButtonLink href="https://example.com" target="_blank">
  Example
</ButtonLink>

<ButtonLink as={Link} href="/input">
  NextLink
</ButtonLink>