Button

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

<Button label="Button" />

Variants

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

<Button label="Primary" variant="primary" />
<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 isDisabled prop to prevent a button from being interacted with. Disabled buttons communicate that an action is currently unavailable.

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

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 label="Loading" variant="primary" />
<Button isLoading label="Loading" variant="secondary" />
<Button isLoading label="Loading" variant="ghost" />

Full width

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

<Button isFullWidth label="Full width" />

Rounded

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

<Button isRounded label="Rounded" variant="primary" />
<Button isRounded label="Rounded" variant="secondary" />
<Button isRounded label="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.

Button Link

<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="/" />