Skip to content

Main Button

CTA

The main button component with three visual variants for different emphasis levels.

Ready to use

Design Develop Accessibility

The Button is one of the most important interactive elements in the design system. It enables users to take action — saving changes, submitting a form, or moving forward in a process. A Primary Button can appear two ways: as a button (the action happens on the same page) or as a link styled as a button (the action takes the user somewhere else). The Tertiary variant carries an optional underline toggled via the boolean Underline property, keeping behaviour and appearance consistent between Figma and code.

Anatomy

Section titled “Anatomy”

  1. Container — fill, border, and corner radius
  2. Label

  3. Optional leading icon

  4. Optional trailing icon

When to use it

Section titled “When to use it”

Use a Button when:

  • The action happens on the same page (save, add, continue, open).
  • The action is tied directly to the user’s current goal (Submit, Save changes, Buy now).

Use a Link styled as a Button when:

  • The action takes the user to another page or external website.

Avoid a Button when:

  • The interface already shows a Primary Button — only one should be visible per screen or section.
  • The control is icon-only with no label — Buttons always carry text so the action is unambiguous.

Properties

Section titled “Properties”

Type

Three types — Primary, Secondary, Tertiary — set the visual weight. Primary marks the single most important action on a screen; Secondary supports it; Tertiary is reserved for low-priority actions and footnote-style controls.

Size

Three sizes — Large (50px), Medium (38px), Small (32px). Large is the default and covers the majority of layouts. Small is reserved for secondary navigation bars and other dense contexts. Medium exists for legacy parity; avoid introducing new usages.

Contrast

Switches between Neutral (default — on light scheme surfaces) and Contrast (on dark or media-backed surfaces). Each contrast variant pulls its own fill / foreground tokens so legibility holds against the surface beneath.

State

Rested, Hover, Active, Disabled, Focus — each pulls its own design-token set. The Focus ring is the global focus token, not a Button-specific value, so it stays consistent with every other interactive control.

Icon

Optional leading and / or trailing icon, toggled via the Has icon left and Has icon right boolean properties. Icon-only buttons are not supported — use a Media Button instead.

Underline (Tertiary only)

Boolean that adds or removes the bottom border under the label. On by default for text-based or inline actions; off for dense layouts where the line adds visual noise.

Platform considerations

Section titled “Platform considerations”

Desktop

Place the Primary Button where users naturally land — bottom-right of forms, footer of cards, or as a sticky header action. Buttons keep the same height, padding, and typography across all desktop breakpoints; only the surrounding layout adapts.

Tablet

Identical to desktop. Watch the 44×44 px touch target — use Large size whenever a button doubles as a tap target.

Mobile

Promote the Primary Button to full-width inside form layouts so the touch target stays comfortable. Sticky bottom-bar placement is acceptable when the action is mission-critical for the screen.

Best practices

Section titled “Best practices”

A button is the user’s contract with the interface. Make the next step obvious; never make them guess.

Do

Keep one Primary Button per view. Lead labels with a clear, actionable verb (“Save changes”, “View details”). Group Primary + Secondary actions thoughtfully — Secondary supports the Primary, never competes with it. Always wire focus and contrast tokens through the design system.

Don't

Don’t ship icon-only buttons or vague labels (“Click here”, “OK”). Don’t stack multiple Primaries of equal weight. Don’t place Buttons on backgrounds that fight their fill / border — use Contrast variants on dark surfaces. Don’t substitute a Tertiary for a Primary action; the hierarchy matters.

Content guidelines

Section titled “Content guidelines”

Lead with an actionable verb. Keep labels 1–3 words, around 24 characters in English, with 25–40% extra width budgeted for languages like German or Finnish. Avoid jargon and idioms — plain English translates cleanly. In modal groups, both buttons should be self-explanatory: “Save draft” / “Discard draft” beats “Yes” / “No”. For icon-only buttons (which only appear in the Media Button family, not here), wire an aria-label; for icon + text, don’t restate the icon’s meaning in the text.