Blueprint

GuidesFoundationComponentsReleases
⌘K

Button

Buttons trigger an action or event, such as submitting a form, opening a Dialog, canceling an action, or performing a delete operation.

Design guidance

When and how to use this

Use a Button to allow a user to perform an action related to the content currently displayed. For example, on a user profile page an "edit" button that toggles an inline form for editing the profile content.

AttributeUsage
ShapeChoosing a shape is highly dependent on context, however grouped buttons should always be the same shape
FillFill is used to create hierarchy among grouped buttons
SizeLike shape, size is also dependent on context and grouped buttons should be the same size
DisabledThe disabled state is used to convey temporarily unavailable actions

Figma

Drag in a Button from the Buttons v2 library in the Assets pane in your Figma file. We provide 5 semantic color variants to match what's available in code.

React

Button composes Chakra's Button component and is available in four color schemes to indicate the type of associated action.

A light color is also available for use on dark backgrounds.

live

<Stack direction="row" spacing="300" alignItems="center" pl="200">
<Button color="primary">Primary</Button>
<Button color="warning">Warning</Button>
<Button color="danger">Danger</Button>
<Button color="success">Success</Button>
<Stack bg="neutral.700" p="200" borderRadius="300">
<Button color="light">Success</Button>
</Stack>
</Stack>

Next Theme

When using the /next theme, the theming API for Button is slightly different. The shape prop has no effect in the next theme and instead of providing a fill, you'll want to specify the appropriate variant.

Theme Compatibility

It's possible to provide both fill and variant props to Button for forward/backward compatibility between themes.

Enabling the Next Theme

See the Next Theme guide for instructions on how to enable the /next theme in your project.

Variants

The Button supports four variants when using the next theme, primary, secondary, tertiary and ghost.

live

<NextProvider attach fontsHost="/typography/">
<Stack direction="row" spacing="300" alignItems="center" pl="200">
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="ghost">Ghost</Button>
</Stack>
</NextProvider>

Color Scheme

Button supports color modes when using the next theme, but sometimes a design calls for the colorScheme to override the mode. Pass light or dark to set the color explicitly.

live

<NextProvider attach fontsHost="/typography/">
<Stack
direction="row"
spacing="300"
alignItems="center"
p="400"
bg="neutral.800"
m="-400"
>
<Button variant="primary" colorScheme="light">
Primary
</Button>
<Button variant="secondary" colorScheme="light">
Secondary
</Button>
<Button variant="tertiary" colorScheme="light">
Tertiary
</Button>
<Button variant="ghost" colorScheme="light">
Ghost
</Button>
</Stack>
</NextProvider>

If the action associated with an interaction is a navigation, consider using a Link instead. If you definitely need it to look like a button, but it acts as a link, you can use as="a"

live

<Stack direction="row" spacing="300" alignItems="center" pl="200">
<Button as="a" variant="primary" href="">
Primary
</Button>
<Button as="a" variant="secondary" href="">
Secondary
</Button>
<Button as="a" variant="tertiary" href="">
Tertiary
</Button>
<Button as="a" variant="ghost" href="">
Ghost
</Button>
</Stack>

Shape

Shape is controlled via the shape prop and defaults to pill.

live

<Stack direction="row" spacing="300">
<Button shape="pill">Pill</Button>
<Button shape="box">Box</Button>
<Button shape="circle">📵</Button>
<Button shape="square">🛂</Button>
</Stack>

Fill

Shape is controlled via the fill prop and defaults to solid.

live

<Stack direction="row" spacing="300">
<Button fill="solid">Solid</Button>
<Button fill="outline">Outline</Button>
<Button fill="minimal">Minimal</Button>
</Stack>

Size

Size is controlled via the size prop and defaults to medium.

live

<Stack alignItems="center" direction="row" spacing="300">
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
</Stack>

Disabled

Set the isDisabled prop to disable the button.

live

<Stack direction="row" spacing="300">
<Button isDisabled fill="solid">
Disabled
</Button>
<Button isDisabled fill="outline">
Disabled
</Button>
<Button isDisabled fill="minimal">
Disabled
</Button>
</Stack>

Icons

Icons can be included either before or after the button text using the iconBefore and iconAfter props.

live

<SimpleGrid columns={2} gap="300" placeItems="center" width="fit-content">
<Button iconBefore={iCornerLeftUp}>Before</Button>
<Button iconAfter={iCornerRightUp}>After</Button>
<Button iconBefore={iCornerLeftUp} fill="outline">
Before
</Button>
<Button iconAfter={iCornerRightUp} fill="outline">
After
</Button>
<Button iconBefore={iCornerLeftUp} fill="minimal">
Before
</Button>
<Button iconAfter={iCornerRightUp} fill="minimal">
After
</Button>
</SimpleGrid>

Loading

Set the isLoading prop to convey that an action is processing.

live

<Stack direction="row" spacing="300">
<Button isLoading fill="solid">
Disabled
</Button>
<Button isLoading fill="outline">
Disabled
</Button>
<Button isLoading fill="minimal">
Disabled
</Button>
</Stack>

Bootstrap

Use the .btn class and one of the btn-* color scheme classes on a <button> element to make a Button.

live

<div class="hstack gap-200">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-success">Success</button>
</div>

Shape

Shape is applied via the .btn-shape-pill and .btn-shape-box classes in addition to the other .btn classes and defaults to pill.

live

<div class="hstack gap-300">
<button type="button" class="btn btn-primary btn-shape-pill">Pill</button>
<button type="button" class="btn btn-primary btn-shape-box">Box</button>
</div>

Fill

Fill is applied via the .btn-[shape]-[color] instead of the standard .btn-[color] classes.

live

<div class="hstack gap-300">
<button type="button" class="btn btn-primary">Solid</button>
<button type="button" class="btn btn-outline-primary">Outline</button>
<button type="button" class="btn btn-minimal-primary">Minimal</button>
</div>

Size

Size is applied via the .btn-[size] class in addition to other .btn classes and defaults to medium.

live

<div class="hstack gap-300">
<button type="button" class="btn btn-sm btn-primary">Small</button>
<button type="button" class="btn btn-primary">Medium</button>
<button type="button" class="btn btn-lg btn-primary">Large</button>
</div>