Button

Buttons trigger actions or navigate users through a flow. They come in four visual variants to communicate different levels of emphasis, and three sizes to suit different layout contexts. Only one primary action should appear per view.

preview

props

PropTypeDefaultDescription
variant"primary" | "secondary" | "secondary-neutral" | "ghost""primary"Visual style of the button.
size"large" | "medium" | "small""medium"Height and typographic scale of the button.
childrenReactNode"Button text"Label rendered inside the button.
destructivebooleanfalseApplies red colour treatment to primary and secondary variants. No effect on ghost or secondary-neutral.
disabledbooleanfalsePrevents interaction and reduces opacity.
iconReactNode—Icon displayed alongside the label. Only rendered on medium and small sizes — ignored on large.
iconPosition"left" | "right""left"Which side of the label the icon appears on.
onClick() => void—Called when the button is pressed.

usage

Use buttons to let users take action. Pair the variant with the importance of the action — primary for the single most important action on a screen, ghost for low-emphasis or inline actions.

When to use

  • To trigger a distinct action such as submitting a form or confirming a choice
  • To navigate to the next step in a flow

Do not use

  • More than one primary button per screen — it dilutes the visual hierarchy
  • As a link — use a text link or ghost button with navigation intent instead
DoOne primary action per view
Don’tMultiple primary buttons competing for attention

variants

PrimaryThe default. For the single most important action on a view.
SecondaryFor supporting actions that complement the primary action.
Secondary NeutralA tonal variant for use on light or neutral surfaces.
GhostLow-emphasis. For inline, supplementary, or destructive actions.

destructive

Add destructive to signal irreversible or high-risk actions such as deleting, removing, or permanently changing data. It applies only to primary and secondary variants — ghost and secondary-neutral are unaffected.

Primary destructiveFilled red. Use for the single confirming action in a destructive flow, e.g. "Delete account".
Secondary destructiveLight red background with dark red text. Use alongside a primary action or for a softer destructive prompt.

size

LargeFor prominent actions and spacious layouts
MediumStandard size for most layouts
SmallCompact, pill-shaped for tight spaces

states

DefaultResting state
HoverDarkened background on cursor over
FocusFocus ring shown on keyboard navigation only

icons

Icons can be added to medium and small buttons to reinforce the action with a visual cue. They are not supported on large buttons. Place the icon on the left for actions that initiate something (add, download) and on the right for actions that move the user forward (open, continue).

When to use

  • The icon clearly represents the action — download, open link, add item
  • A single, simple action where the icon adds meaningful context

Do not use

  • In tables or action-heavy areas — use an Icon Button instead
  • With a decorative or ambiguous icon that doesn't directly relate to the action
  • On large buttons — icons are not supported at that size
Left iconUse for initiating actions — adding, downloading, creating.
Right iconUse for forward navigation — opening a page or moving to the next step.
Small with iconIcons scale down to 16px on small buttons.