Button

Trigger an action or event, such as submitting a form or displaying a dialog.

Sizes

The default size is regular.

Variants

The default mode is secondary.

Toggle state

Pair subtle and tertiary for a view switcher. subtle is the off state: transparent background and secondary text, changing to a tertiary background and primary text on hover. tertiary is the selected state: tertiary background and primary text, with no hover change. Both modes use a quaternary background while pressed. Set aria-pressed to expose which view is selected.

Start and end icons

iconStart and iconEnd take an icon name, or { name, variant } for an icon variant. Don’t pass an <Icon /> element; lint rejects it. A button with an icon and no label is an icon-only button, so give it an aria-label.

Loading

Loading disables the button, which switches it to the secondary background, so these examples sit on a card like they do in the product. Text-only buttons keep the centered spinner overlay so the control does not reflow. Use a fixed width such as w-40 when you want to lock the size during that transition.

Loading interactive

See the loading state transition as the button enters and exits loading.

Loading variants

Compare loading states across the primary, secondary, ghost, destructive, and dashed modes.

Loading sizes

Compare the loading overlay at each supported button size.

Loading fixed width

A fixed width keeps the button size consistent while its loading overlay is visible.

Loading icon toggle

When the button has an icon, the spinner replaces that icon and the label stays visible.

Loading with icons

The spinner replaces the start icon when one exists, the end icon when that is the only icon, and only the start icon when both are present. Icon-only buttons swap the icon for the spinner. Ghost and subtle use a tertiary background while loading.

Usage

Properties

mode
'primary''secondary''tertiary''ghost''subtle''destructive''dashed'

Visual style of the button

Default: secondary

secondarySurface
'control''page'

Use 'page' to give a secondary button the page background when it sits on a tinted surface

Default: control

size
'micro''small''regular''large'

Size of the button on desktop

Default: regular

iconStart
IconValue

Icon name or { name, variant } shown at the start of the button. Pass a node only for artwork that isn't in the icon set

iconEnd
IconValue

Icon shown at the end of the button. Same values as iconStart

loading
{ isLoading?: boolean; className?: string; }

Loading state configuration. Disables the control while loading. Text-only buttons show a centered spinner overlay. When an icon is present the spinner replaces that icon and the label stays visible.

contentClassName
string

Custom class name for the button content wrapper

allowScaleOnClick
boolean

Whether to allow scale animation on click

Default: true

error
boolean

Whether to display the button in error state

Default: false

className
string

Additional CSS classes to apply to the button

children
ReactNode

Button content

disabled
boolean

Whether the button is disabled

Default: false

type
'button''submit''reset'

Button type attribute

Default: button

href
string

Renders a Next.js Link instead of a button. While disabled or loading it renders a non-interactive span with aria-disabled

prefetch
LinkProps['prefetch']

Next.js Link prefetch behavior. Only applies with href