Design
The Button is one of the most important interactive elements in the design system. It enables users to take action — for example, saving changes, submitting a form, or moving forward in a process.
There are two main ways a Primary Button can appear:
- As a Button: used when the action happens within the same page (e.g. opening a modal, submitting data).
- As a Link styled as a Button: used when the action takes the user to another page or an external website.
The Tertiary Button includes an optional underline that can be toggled on or off through the boolean property “Underline”. This ensures consistent behaviour and appearance while simplifying maintenance and documentation across Figma and development.
When to use it (and when not to)
Section titled “When to use it (and when not to)”- Use a Button when the action happens on the same page (save, add, continue, open).
- Use a Link (styled as a button) when the user needs to go to another page or website.
- Only use one Primary Button per screen or section, so it’s clear what the main action is.
- Never use an icon-only button — there must always be text so that everyone understands it.
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”- Buttons can be used with a keyboard, always show a visible focus, and meet accessibility contrast requirements so text is easy to read.
- The touch area is always at least 44×44px, so it’s easy to press on mobile.
- Semantics are correct: buttons are for actions, links are for navigation. This makes them predictable and clear for everyone, including people using assistive technologies.
- Buttons can be restyled to match the look and feel of each brand without changing their structure. In Figma, this is done by switching modes, so the same component automatically takes on the right colours, typography, and styles for each brand.
- Design tokens keep these styles consistent across brands, devices, and screens.
Buttons remain consistent across all breakpoints. Their design, size, and interaction states are the same on every device — only layout spacing and container alignment adapt to ensure responsiveness.
Properties
Section titled “Properties”Type : Primary by State
Section titled “Type : Primary by State”Rested
Button-Main
Background color:
buttons-main-button-primary-neutral-rested-fill-color#00244dbuttons-main-button-primary-neutral-rested-fill-color#282830 Border color:
buttons-main-button-primary-neutral-rested-border-color#15151bbuttons-main-button-primary-neutral-rested-border-color#282830 Border weight: 1
Border radius:
buttons-corner-radius1000pxbuttons-corner-radius0px Stroke alignment: Inside
Label
Text color:
buttons-main-button-primary-neutral-rested-foreground-color#ffffffbuttons-main-button-primary-neutral-rested-foreground-color#ffffffHover
Button-Main
Background color:
buttons-main-button-primary-neutral-hover-fill-color#001a38buttons-main-button-primary-neutral-hover-fill-color#6c7073 Border color:
buttons-main-button-primary-neutral-hover-border-color#15151bbuttons-main-button-primary-neutral-hover-border-color#6c7073 Border weight: 0
Border radius:
buttons-corner-radius1000pxbuttons-corner-radius0pxLabel
Text color:
buttons-main-button-primary-neutral-hover-foreground-color#ffffffbuttons-main-button-primary-neutral-hover-foreground-color#ffffffActive
Button-Main
Background color:
buttons-main-button-primary-neutral-active-fill-color#000000buttons-main-button-primary-neutral-active-fill-color#000000 Border color:
buttons-main-button-primary-neutral-active-border-color#000000buttons-main-button-primary-neutral-active-border-color#15151b Border weight: 1
Border radius:
buttons-corner-radius1000pxbuttons-corner-radius0pxLabel
Text color:
buttons-main-button-primary-neutral-rested-foreground-color#ffffffbuttons-main-button-primary-neutral-rested-foreground-color#ffffffDisabled
Button-Main
Background color:
buttons-main-button-primary-neutral-disabled-fill-color#e5e3e1buttons-main-button-primary-neutral-disabled-fill-color#a8aaac Border color:
buttons-main-button-primary-neutral-disabled-border-color#666666buttons-main-button-primary-neutral-disabled-border-color#a8aaac Border weight: 1
Border radius:
buttons-corner-radius1000pxbuttons-corner-radius0pxLabel
Text color:
buttons-main-button-primary-neutral-disabled-foreground-color#4d4d4dbuttons-main-button-primary-neutral-disabled-foreground-color#15151bFocus
Button-Main
Border color:
color-border-focus-neutral-default#c57046color-border-focus-neutral-default#0072f0 Border weight: 2
Border radius: 2
Type : Secondary by State
Section titled “Type : Secondary by State”Rested
Button-Main
Border color:
buttons-main-button-secondary-neutral-rested-border-color#c57046buttons-main-button-secondary-neutral-rested-border-color#a8aaac Border weight: 1
Border radius:
buttons-corner-radius1000pxbuttons-corner-radius0px Stroke alignment: Inside
Label
Text color:
buttons-main-button-secondary-neutral-rested-foreground-color#000000buttons-main-button-secondary-neutral-rested-foreground-color#15151bHover
Button-Main
Background color:
buttons-main-button-secondary-neutral-hover-fill-colorrgba(255, 255, 255, 0.5)buttons-main-button-secondary-neutral-hover-fill-color#e4e4e4 Border color:
buttons-main-button-secondary-neutral-hover-foreground-color#000000buttons-main-button-secondary-neutral-hover-foreground-color#15151b Border weight: 1
Label
Text color:
buttons-main-button-secondary-neutral-hover-foreground-color#000000buttons-main-button-secondary-neutral-hover-foreground-color#15151bActive
Button-Main
Background color:
buttons-main-button-secondary-neutral-active-fill-colorrgba(255, 255, 255, 0.5)buttons-main-button-secondary-neutral-active-fill-color#ffffff Border color:
buttons-main-button-secondary-neutral-active-border-color#c57046buttons-main-button-secondary-neutral-active-border-color#15151b Border weight: 1
Label
Text color:
buttons-main-button-secondary-neutral-active-foreground-color#000000buttons-main-button-secondary-neutral-active-foreground-color#15151bDisabled
Button-Main
Border color:
buttons-main-button-secondary-neutral-disabled-border-color#666666buttons-main-button-secondary-neutral-disabled-border-color#6c7073 Border weight: 1
Label
Text color:
buttons-main-button-secondary-neutral-disabled-foreground-color#a8aaacbuttons-main-button-secondary-neutral-disabled-foreground-color#6c7073Focus
Button-Main
Border color:
color-border-focus-neutral-default#c57046color-border-focus-neutral-default#0072f0 Border weight: 2
Border radius: 2
Type : Tertiary by State
Section titled “Type : Tertiary by State”Rested
Button-Main
Stroke alignment: Center
Border radius: 0
border
Border color:
buttons-main-button-tertiary-neutral-rested-border-color#c57046buttons-main-button-tertiary-neutral-rested-border-color#282830Hover
Button-Main
Stroke alignment: Inside
Border radius: 0
border
Border color:
buttons-main-button-tertiary-neutral-hover-border-color#c57046buttons-main-button-tertiary-neutral-hover-border-color#6c7073Active
Button-Main
Stroke alignment: Inside
Border radius: 0
border
Border color:
buttons-main-button-tertiary-neutral-active-border-color#c57046buttons-main-button-tertiary-neutral-active-border-color#15151bLabel
Text color:
buttons-main-button-tertiary-neutral-rested-foreground-color#000000buttons-main-button-tertiary-neutral-rested-foreground-color#282830Disabled
Button-Main
Stroke alignment: Inside
Border radius: 0
border
Border color:
buttons-main-button-tertiary-neutral-disabled-border-color#999999buttons-main-button-tertiary-neutral-disabled-border-color#6c7073Label
Text color:
buttons-main-button-tertiary-neutral-disabled-foreground-color#a8aaacbuttons-main-button-tertiary-neutral-disabled-foreground-color#6c7073Focus
Button-Main
Border color:
color-border-focus-neutral-default#c57046color-border-focus-neutral-default#0072f0 Stroke alignment: Inside
Border weight: 2
Border radius: 2
Large (LG)
Button-Main
Height: 50
Medium (MD)
Button-Main
Height: 38
Small (SM)
Button-Main
Height: 32
We define three sizes for this component: Large (LG), Medium (MD) and Small (SM). Each size has a specific role and should be applied consistently across the system.
- Large (LG): Most frequently used size. Applied across the majority of modules and layouts. Recommended as the default choice for consistency, unless there is a clear reason to use another size.
- Medium (MD): Currently no active use cases identified. Retained in the system to avoid breaking existing designs where it might have been applied. Future audits may redefine or consolidate this size depending on real usage.
- Small (SM): Used in specific contexts such as secondary navigation bars. Helps reduce visual weight when multiple elements compete for space. Must not be used for primary actions or as the default size. Only apply it when hierarchy and space require it.
Contrast
Section titled “Contrast”Neutral (False)
Button-Main
Background color:
buttons-main-button-primary-neutral-rested-fill-color#00244dbuttons-main-button-primary-neutral-rested-fill-color#282830 Border color:
buttons-main-button-primary-neutral-rested-border-color#15151bbuttons-main-button-primary-neutral-rested-border-color#282830Label
Text color:
buttons-main-button-primary-neutral-rested-foreground-color#ffffffbuttons-main-button-primary-neutral-rested-foreground-color#ffffffContrast (True)
Button-Main
Background color:
buttons-main-button-primary-contrast-rested-fill-color#ffffffbuttons-main-button-primary-contrast-rested-fill-color#ffffff Border color:
buttons-main-button-primary-contrast-rested-border-color#ffffffbuttons-main-button-primary-contrast-rested-border-color#ffffffLabel
Text color:
buttons-main-button-primary-contrast-rested-foreground-color#000000buttons-main-button-primary-contrast-rested-foreground-color#15151bBoolean Properties
Section titled “Boolean Properties”Has icon right
Arrow_Right
Type: Boolean
Default: true
Has icon left
Arrow_Right
Type: Boolean
Default: true
Has border
border
Type: Boolean
Default: true
Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
buttons-main-button-primary-neutral-rested-fill-color | Background color | Button-Main |
buttons-main-button-primary-neutral-rested-fill-color | Background color | Button-Main |
buttons-main-button-primary-neutral-rested-border-color | Border color | Button-Main |
buttons-main-button-primary-neutral-rested-border-color | Border color | Button-Main |
buttons-main-button-primary-neutral-rested-foreground-color | Text color | Label |
buttons-main-button-primary-neutral-rested-foreground-color | Text color | Label |
buttons-main-button-primary-contrast-rested-fill-color | Background color | Button-Main |
buttons-main-button-primary-contrast-rested-fill-color | Background color | Button-Main |
buttons-main-button-primary-contrast-rested-border-color | Border color | Button-Main |
buttons-main-button-primary-contrast-rested-border-color | Border color | Button-Main |
buttons-main-button-primary-contrast-rested-foreground-color | Text color | Label |
buttons-main-button-primary-contrast-rested-foreground-color | Text color | Label |
buttons-main-button-primary-neutral-hover-fill-color | Background color | Button-Main |
buttons-main-button-primary-neutral-hover-fill-color | Background color | Button-Main |
buttons-main-button-primary-neutral-hover-border-color | Border color | Button-Main |
buttons-main-button-primary-neutral-hover-border-color | Border color | Button-Main |
buttons-main-button-primary-neutral-hover-foreground-color | Text color | Label |
buttons-main-button-primary-neutral-hover-foreground-color | Text color | Label |
buttons-main-button-primary-neutral-active-fill-color | Background color | Button-Main |
buttons-main-button-primary-neutral-active-fill-color | Background color | Button-Main |
buttons-main-button-primary-neutral-active-border-color | Border color | Button-Main |
buttons-main-button-primary-neutral-active-border-color | Border color | Button-Main |
buttons-main-button-primary-neutral-active-foreground-color | Text color | Label |
buttons-main-button-primary-neutral-active-foreground-color | Text color | Label |
buttons-main-button-primary-neutral-disabled-fill-color | Background color | Button-Main |
buttons-main-button-primary-neutral-disabled-fill-color | Background color | Button-Main |
buttons-main-button-primary-neutral-disabled-border-color | Border color | Button-Main |
buttons-main-button-primary-neutral-disabled-border-color | Border color | Button-Main |
buttons-main-button-primary-neutral-disabled-foreground-color | Text color | Label |
buttons-main-button-primary-neutral-disabled-foreground-color | Text color | Label |
buttons-main-button-secondary-neutral-rested-border-color | Border color | Button-Main |
buttons-main-button-secondary-neutral-rested-border-color | Border color | Button-Main |
buttons-main-button-secondary-neutral-rested-foreground-color | Text color | Label |
buttons-main-button-secondary-neutral-rested-foreground-color | Text color | Label |
buttons-main-button-secondary-neutral-hover-fill-color | Background color | Button-Main |
buttons-main-button-secondary-neutral-hover-fill-color | Background color | Button-Main |
buttons-main-button-secondary-neutral-hover-foreground-color | Text color | Label |
buttons-main-button-secondary-neutral-hover-foreground-color | Text color | Label |
buttons-main-button-secondary-neutral-active-fill-color | Background color | Button-Main |
buttons-main-button-secondary-neutral-active-fill-color | Background color | Button-Main |
buttons-main-button-secondary-neutral-active-border-color | Border color | Button-Main |
buttons-main-button-secondary-neutral-active-border-color | Border color | Button-Main |
buttons-main-button-secondary-neutral-active-foreground-color | Text color | Label |
buttons-main-button-secondary-neutral-active-foreground-color | Text color | Label |
buttons-main-button-secondary-neutral-disabled-border-color | Border color | Button-Main |
buttons-main-button-secondary-neutral-disabled-border-color | Border color | Button-Main |
buttons-main-button-secondary-neutral-disabled-foreground-color | Text color | Label |
buttons-main-button-secondary-neutral-disabled-foreground-color | Text color | Label |
buttons-main-button-tertiary-neutral-rested-border-color | Border color | border |
buttons-main-button-tertiary-neutral-rested-border-color | Border color | border |
buttons-main-button-tertiary-neutral-rested-foreground-color | Text color | Label |
buttons-main-button-tertiary-neutral-rested-foreground-color | Text color | Label |
buttons-main-button-tertiary-neutral-hover-border-color | Border color | border |
buttons-main-button-tertiary-neutral-hover-border-color | Border color | border |
buttons-main-button-tertiary-neutral-hover-foreground-color | Text color | Label |
buttons-main-button-tertiary-neutral-hover-foreground-color | Text color | Label |
buttons-main-button-tertiary-neutral-active-border-color | Border color | border |
buttons-main-button-tertiary-neutral-active-border-color | Border color | border |
buttons-main-button-tertiary-neutral-active-foreground-color | Text color | Label |
buttons-main-button-tertiary-neutral-active-foreground-color | Text color | Label |
buttons-main-button-tertiary-neutral-disabled-border-color | Border color | border |
buttons-main-button-tertiary-neutral-disabled-border-color | Border color | border |
buttons-main-button-tertiary-neutral-disabled-foreground-color | Text color | Label |
buttons-main-button-tertiary-neutral-disabled-foreground-color | Text color | Label |
color-border-focus-neutral-default | Border color | Button-Main (Focus) |
color-border-focus-neutral-default | Border color | Button-Main (Focus) |
buttons-corner-radius | Border radius | Button-Main |
buttons-corner-radius | Border radius | Button-Main |
Spacing
Section titled “Spacing”| Name | Applied as | Applied to |
|---|---|---|
buttons-lg-content-gap | Item spacing | Button-Main |
buttons-lg-content-gap | Item spacing | Button-Main |
buttons-lg-spacing-horizontal | Padding left / right | Button-Main |
buttons-lg-spacing-horizontal | Padding left / right | Button-Main |
buttons-lg-spacing-vertical | Padding top / bottom | Button-Main |
buttons-lg-spacing-vertical | Padding top / bottom | Button-Main |
buttons-md-content-gap | Item spacing | Button-Main |
buttons-md-content-gap | Item spacing | Button-Main |
buttons-md-spacing-horizontal | Padding left / right | Button-Main |
buttons-md-spacing-horizontal | Padding left / right | Button-Main |
buttons-md-spacing-vertical | Padding top / bottom | Button-Main |
buttons-md-spacing-vertical | Padding top / bottom | Button-Main |
buttons-sm-content-gap | Item spacing | Button-Main |
buttons-sm-content-gap | Item spacing | Button-Main |
buttons-sm-spacing-horizontal | Padding left / right | Button-Main |
buttons-sm-spacing-horizontal | Padding left / right | Button-Main |
buttons-sm-spacing-vertical | Padding top / bottom | Button-Main |
buttons-sm-spacing-vertical | Padding top / bottom | Button-Main |
Text Styles
Section titled “Text Styles”| Name | Applied as | Applied to |
|---|---|---|
Lorem Ipsum
buttons-sm-font-size | Text style | Button Label |
Lorem Ipsum
buttons-sm-font-size | Text style | Button Label |
Lorem Ipsum
buttons-md-font-size | Text style | Button Label |
Lorem Ipsum
buttons-md-font-size | Text style | Button Label |
Lorem Ipsum
buttons-lg-font-size | Text style | Button Label |
Lorem Ipsum
buttons-lg-font-size | Text style | Button Label |
Placement and hierarchy
Section titled “Placement and hierarchy”- There should only ever be one Primary Button visible within a page or container. This keeps the main action clear and avoids competing calls to action.
- Place the Primary Button where users naturally expect to find the next step — for example, at the bottom right of a form, in the footer of a card, or as a sticky action in a header.
- Secondary and Tertiary Buttons must always be positioned in relation to the Primary. They must not compete visually. Place them to the left of, or below, the Primary Button, or move them into a contextual menu if space is limited.
- Ensure sufficient spacing between buttons to prevent accidental clicks or taps. Button height and width must always follow design tokens for consistency across breakpoints.
- Use contrast, size and weight to make sure the Primary Button stands out as the most important action on the screen.
Guidance on how to use a component.
Primary Button
Section titled “Primary Button”- Represents the main action on a screen or within a content block.
- There should only ever be one Primary Button per view to maintain hierarchy.
- Ensure strong visual emphasis (high contrast, size, weight).
- Use it when the action is directly tied to the user’s goal (e.g. Save, Submit, Purchase).
Secondary Button
Section titled “Secondary Button”- Represents a supporting action.
- Multiple Secondary Buttons can be used within the same view.
- Use it when the Primary action is already present and you don’t want to compete with it visually.
- Suitable for actions such as Back, Cancel, Edit.
Tertiary Button
Section titled “Tertiary Button”- Represents a low-priority action, used infrequently.
- Helps reduce visual noise in the interface.
- Common in footers, settings panels, filters, preferences.
- Works well in card layouts or lists where the action should not steal attention.
- Use the Underline property to adapt the tertiary button visually when needed.
- Keep its default (underline visible) for text-based or inline actions.
- Disable it when the button appears in dense layouts or icon-driven contexts to reduce visual noise.
Guidance on what to avoid when using a component.
Primary Button
Section titled “Primary Button”- Don’t place multiple Primary Buttons of equal importance within the same view.
- Don’t use it inside highly prominent containers where it may feel visually overwhelming.
- Don’t place it on backgrounds with strong or conflicting colours that reduce clarity.
Secondary Button
Section titled “Secondary Button”- Don’t use it when the action is the main call to action (use Primary instead).
- Don’t place it in tight spaces where bordered styles look cluttered or compete with container borders.
- Don’t use it when de-emphasis is required (in those cases use Tertiary).
Tertiary Button
Section titled “Tertiary Button”- Don’t use it for main user actions (use Primary or Secondary instead).
- Don’t place it in contexts where strong contrast is needed (e.g. dark mode, complex backgrounds).
- Don’t use it if the border blends into the background, making it hard to perceive.
Best Practices
Section titled “Best Practices”Guidance on where this component has been used
Buttons should
Section titled “Buttons should”- Use clear and accurate labels that lead with an actionable verb.
- Be limited to one Primary per view to maintain hierarchy.
- Be positioned consistently across screens to support predictable navigation.
- Use established button colours appropriately (e.g. avoid over-emphasis with multiple high-contrast buttons).
- Never rely on icons alone — always provide a text label or accessible name.
- Be grouped thoughtfully: Secondary or Tertiary actions should be visually related to the Primary but not compete with it.
Buttons versus links
Section titled “Buttons versus links”- Buttons are used for actions (e.g. Add, Save, Close).
- Links are used for navigation and typically appear within or following a sentence.
- Using the correct element improves accessibility, visual consistency, and maintainability at scale.
Button groups
Section titled “Button groups”- Only use buttons that follow the best practices defined above.
- Group together calls to action that share a clear relationship.
- Avoid overloading users with too many buttons — this can cause uncertainty about what to do next.
- Be mindful of how multiple buttons display and behave on smaller screens.
- Limit groups to a maximum of six buttons, and only when they contain icons without text.
Content and copy
Section titled “Content and copy”- Use clear and specific action verbs. Examples: Save changes / Download invoice / Submit form. Avoid vague labels such as: Click here / OK / Confirm.
- Be concise — limit button text to 1–3 words, aiming for around 24 characters in English. Allow flexibility for languages with longer words (e.g. German, Finnish).
- Make the outcome predictable. Instead of Yes / No, use: Yes, delete account / Cancel.
- Avoid jargon or idioms — use plain English.
- When buttons appear in groups (e.g. modal dialogs), each should be self-explanatory. Example: Save draft / Discard draft — not: Yes / No.
- For icon-only buttons, ensure accessible names are applied (e.g. using
aria-label). For icon + text buttons, do not repeat the icon meaning redundantly in the text. - Keep copy neutral, translatable and adaptable. Buttons must allow at least 25–40% extra width to accommodate longer translations.