Design
Pill Buttons are secondary interactive elements used for filtering, tagging, or toggling options within the interface. They are visually lighter than standard buttons and should never be used for primary actions.
There are two main use cases:
- Selectable Pills: used to represent filters or toggles that can be selected/deselected.
- Informational Pills: used to highlight contextual information (e.g. labels or statuses).
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use a Pill Button when:
- You need lightweight, secondary interactions (e.g. filters, tag selectors).
- You want to visually group related options horizontally (e.g. category filters).
- You need a clear selected/unselected visual state.
Avoid using Pill Buttons when:
- The action represents a primary call to action (use Primary Button instead).
- The action leads to navigation (use Link Button instead).
- You need destructive or confirmatory actions (use Secondary or Alert Buttons).
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”- Always built as
<button>elements, not<a>links. - Must maintain a minimum touch target of 44×44px (WCAG 2.5.5 / EN 301 549).
- Each Pill must have visible text and a clearly distinguishable focus state.
- Icon-only pills are not allowed, text is mandatory.
- Tokens manage colours, corner radius and borders for consistency across themes.
Properties
Section titled “Properties”State : Rested by Type
Section titled “State : Rested by Type”Neutral
Pill Button
Border color:
buttons-pill-button-neutral-rested-border-color#666666buttons-pill-button-neutral-rested-border-color#282830 Border radius: 1000
Border weight: 1
UI_Spinner
Interface: Light
Button label
Text color:
buttons-pill-button-neutral-rested-foreground-color#333333buttons-pill-button-neutral-rested-foreground-color#282830Contrast
Pill Button
Border color:
buttons-pill-button-contrast-inactive-border-color#ffffffbuttons-pill-button-contrast-inactive-border-color#ffffff Border radius: 1000
Border weight: 1
UI_Spinner
Interface: Dark
Button label
Text color:
buttons-pill-button-contrast-inactive-foreground-color#ffffffbuttons-pill-button-contrast-inactive-foreground-color#ffffffOnOverlay Light
Pill Button
Border color:
buttons-pill-button-on-overlay-light-inactive-border-color#ffffffbuttons-pill-button-on-overlay-light-inactive-border-color#ffffff Border weight: 1
Border radius: 1000
UI_Spinner
Interface: Dark
Button label
Text color:
buttons-pill-button-on-overlay-light-inactive-foreground-color#ffffffbuttons-pill-button-on-overlay-light-inactive-foreground-color#ffffffOnOverlay C2A
Pill Button
Border color:
buttons-pill-button-on-overlay-c2a-inactive-border-color#ffffffbuttons-pill-button-on-overlay-c2a-inactive-border-color#ffffff Border weight: 1
Border radius: 1000
UI_Spinner
Interface: Dark
Button label
Text color:
buttons-pill-button-on-overlay-c2a-inactive-foreground-color#ffffffbuttons-pill-button-on-overlay-c2a-inactive-foreground-color#ffffffState : Hover by Type
Section titled “State : Hover by Type”Neutral
Pill Button
Background color:
buttons-pill-button-neutral-hover-fill-color#4d4d4dbuttons-pill-button-neutral-hover-fill-color#6c7073 Border radius: 1000
UI_Spinner
Interface: Dark
Button label
Text color:
buttons-pill-button-neutral-hover-foreground-color#fbfbfcbuttons-pill-button-neutral-hover-foreground-color#ffffffContrast
Pill Button
Background color:
buttons-pill-button-contrast-hover-fill-color#f5f5f5buttons-pill-button-contrast-hover-fill-color#a8aaac Border radius: 1000
UI_Spinner
Interface: Light
Button label
Text color:
buttons-pill-button-contrast-hover-foreground-color#333333buttons-pill-button-contrast-hover-foreground-color#282830OnOverlay Light
Pill Button
Background color:
buttons-pill-button-on-overlay-light-hover-fill-color#f5f5f5buttons-pill-button-on-overlay-light-hover-fill-color#a8aaacUI_Spinner
Interface: Light
Button label
Text color:
buttons-pill-button-on-overlay-light-hover-foreground-color#333333buttons-pill-button-on-overlay-light-hover-foreground-color#282830OnOverlay C2A
Pill Button
Background color:
buttons-pill-button-on-overlay-c2a-hover-fill-colorrgba(0, 0, 0, 0.3)buttons-pill-button-on-overlay-c2a-hover-fill-colorrgba(0, 0, 0, 0.65) Border color:
buttons-pill-button-on-overlay-c2a-hover-border-colorrgba(255, 255, 255, 0.5)buttons-pill-button-on-overlay-c2a-hover-border-colorrgba(255, 255, 255, 0.45) Background blur:
Bg Blur/Bg blur 30
Border weight: 1
UI_Spinner
Interface: Dark
Button label
Text color:
buttons-pill-button-on-overlay-c2a-hover-foreground-color#fbfbfcbuttons-pill-button-on-overlay-c2a-hover-foreground-color#ffffffState : Active by Type
Section titled “State : Active by Type”Neutral
Pill Button
Background color:
buttons-pill-button-neutral-selected-fill-color#000000buttons-pill-button-neutral-selected-fill-color#282830 Border radius: 1000
UI_Spinner
Interface: Dark
Button label
Text color:
buttons-pill-button-neutral-selected-foreground-color#ffffffbuttons-pill-button-neutral-selected-foreground-color#ffffffContrast
Pill Button
Background color:
buttons-pill-button-contrast-selected-fill-color#ffffffbuttons-pill-button-contrast-selected-fill-color#e4e4e4 Border radius: 1000
UI_Spinner
Interface: Light
Button label
Text color:
buttons-pill-button-contrast-selected-foreground-color#333333buttons-pill-button-contrast-selected-foreground-color#15151bOnOverlay Light
Pill Button
Background color:
buttons-pill-button-on-overlay-light-selected-fill-color#ffffffbuttons-pill-button-on-overlay-light-selected-fill-color#e4e4e4UI_Spinner
Interface: Light
Button label
Text color:
buttons-pill-button-on-overlay-light-selected-foreground-color#333333buttons-pill-button-on-overlay-light-selected-foreground-color#15151bOnOverlay C2A
Pill Button
Background color:
buttons-pill-button-on-overlay-c2a-selected-fill-colorrgba(0, 0, 0, 0.3)buttons-pill-button-on-overlay-c2a-selected-fill-colorrgba(0, 0, 0, 0.55) Border color:
buttons-pill-button-on-overlay-c2a-selected-border-colorrgba(255, 255, 255, 0.5)buttons-pill-button-on-overlay-c2a-selected-border-colorrgba(255, 255, 255, 0.45) Background blur:
Bg Blur/Bg blur 30
Border weight: 1
UI_Spinner
Interface: Dark
Button label
Text color:
buttons-pill-button-on-overlay-c2a-selected-foreground-color#333333buttons-pill-button-on-overlay-c2a-selected-foreground-color#ffffffState : Disabled by Type
Section titled “State : Disabled by Type”Neutral
Pill Button
Background color:
buttons-pill-button-neutral-disabled-fill-color#e5e3e1buttons-pill-button-neutral-disabled-fill-color#a8aaac Border radius: 1000
UI_Spinner
Interface: Light
Button label
Text color:
buttons-pill-button-neutral-disabled-foreground-color#4d4d4dbuttons-pill-button-neutral-disabled-foreground-color#282830Contrast
Pill Button
Background color:
buttons-pill-button-contrast-disabled-fill-color#4d4d4dbuttons-pill-button-contrast-disabled-fill-color#6c7073 Border radius: 1000
UI_Spinner
Interface: Dark
Button label
Text color:
buttons-pill-button-contrast-disabled-foreground-color#ffffffbuttons-pill-button-contrast-disabled-foreground-color#ffffffOnOverlay Light
Pill Button
Background color:
buttons-pill-button-on-overlay-light-disabled-fill-color#4d4d4dbuttons-pill-button-on-overlay-light-disabled-fill-color#6c7073UI_Spinner
Interface: Dark
Button label
Text color:
buttons-pill-button-on-overlay-light-disabled-foreground-color#4d4d4dbuttons-pill-button-on-overlay-light-disabled-foreground-color#ffffffOnOverlay C2A
Pill Button
Background color:
buttons-pill-button-on-overlay-c2a-disabled-background-color#4d4d4dbuttons-pill-button-on-overlay-c2a-disabled-background-color#6c7073 Background blur:
Bg Blur/Bg blur 30
UI_Spinner
Interface: Dark
Button label
Text color:
buttons-pill-button-on-overlay-c2a-disabled-foreground-color#ffffffbuttons-pill-button-on-overlay-c2a-disabled-foreground-color#ffffffState : Focus by Type
Section titled “State : Focus by Type”Neutral
Pill Button
Border color:
color-border-focus-neutral-default#c57046color-border-focus-neutral-default#0072f0 Border weight: 2
Border radius: 100
Contrast
Pill Button
Border color:
color-border-focus-contrast-default#ffffffcolor-border-focus-contrast-default#60a7ff Border weight: 2
Border radius: 100
OnOverlay Light
Pill Button
Border color:
color-border-focus-contrast-default#ffffffcolor-border-focus-contrast-default#60a7ff Border weight: 2
Border radius: 100
OnOverlay C2A
Pill Button
Border color:
color-border-focus-contrast-default#ffffffcolor-border-focus-contrast-default#60a7ff Border weight: 2
Border radius: 100
Small
Button label
Text style:
Components/button/sm-text
Medium
Button label
Text style:
Components/button/md-text
Large
Button label
Text style:
Components/button/lg-text
When to use each size
Section titled “When to use each size”- Large (LG): Use in layouts with more visual weight or prominence (e.g. main filter areas).
- Medium (MD): Default choice — use across most modules.
- Small (SM): Use in dense layouts or when space is limited.
Pill Buttons automatically adapt to text width and height, ensuring proportional spacing across sizes.
Boolean properties
Section titled “Boolean properties”Icon left
UI_Spinner
Property type: Boolean
Default: true
Icon right
UI_ArrowRight
Property type: Boolean
Default: true
Guidance on how to use a component.
- Add invisible padding around Pills when needed to expand the touch target (without altering the visual appearance).
- Ensure Pills remain easily tappable in responsive layouts and on mobile contexts.
- Keep sufficient spacing between adjacent Pills (≥ 8 px horizontally / 4 px vertically).
Guidance on what to avoid when using a component.
- Do not rely solely on the visible shape to define the touch area.
- Do not define touch areas smaller than 24 × 24 px (even for compact Pills).
- Avoid placing multiple Pills so close that their touch areas overlap, as this may hinder accessibility.
Content / Copy Guidelines
Section titled “Content / Copy Guidelines”Pill Buttons can trigger an action or represent a selectable state — for example, when used as filters or tags. Their text must clearly describe what they do or what they represent, keeping phrasing short, accessible, and easy to translate.
Keep labels concise
Section titled “Keep labels concise”- Use 1–2 words for filters, 1–3 words for actions.
- Keep copy short and scannable to support responsive behaviour.
Descriptive text
Section titled “Descriptive text”- Use clear, specific text that communicates either an action (e.g. Apply, Show all) or a state (e.g. Electric, In stock).
Avoid vague labels
Section titled “Avoid vague labels”- Do not use generic or meaningless labels such as OK, Click, Select, or Filter.
Logical label
Section titled “Logical label”- The label should make sense on its own — users shouldn’t need to read nearby text to understand it.
Character limit
Section titled “Character limit”- Keep text under 24–30 characters to maintain consistency across translations and responsive layouts.
- Allow flexibility for longer words in languages such as German or Finnish.
- Do not truncate button text: use text wrapping when necessary to preserve meaning and accessibility.
Language and tone
Section titled “Language and tone”- Use clear, neutral phrasing that can be easily localised.
- Avoid idioms, humour, or culture-specific references that might not translate well.
Sentence case
Section titled “Sentence case”- Always use sentence case (e.g. Apply filter, not APPLY FILTER).
Punctuation
Section titled “Punctuation”- Avoid punctuation unless strictly necessary (e.g. no full stops).
Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
buttons-pill-button-neutral-rested-border-color | Border color | Pill Button |
buttons-pill-button-neutral-rested-border-color | Border color | Pill Button |
buttons-pill-button-neutral-rested-foreground-color | Text color | Button label |
buttons-pill-button-neutral-rested-foreground-color | Text color | Button label |
buttons-pill-button-neutral-hover-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-hover-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-hover-foreground-color | Text color | Button label |
buttons-pill-button-neutral-hover-foreground-color | Text color | Button label |
buttons-pill-button-neutral-selected-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-selected-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-selected-foreground-color | Text color | Button label |
buttons-pill-button-neutral-selected-foreground-color | Text color | Button label |
buttons-pill-button-neutral-disabled-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-disabled-fill-color | Background color | Pill Button |
buttons-pill-button-neutral-disabled-foreground-color | Text color | Button Label |
buttons-pill-button-neutral-disabled-foreground-color | Text color | Button Label |
color-border-focus-neutral-default | Border color | Pill Button |
color-border-focus-neutral-default | Border color | Pill Button |
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 |