Pill Button
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#999999buttons-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#999999buttons-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.55)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#4d4d4dbuttons-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#f5f5f5buttons-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#f5f5f5buttons-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.55)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#000000buttons-pill-button-neutral-disabled-foreground-color#282830Contrast
Pill Button
Background color:
buttons-pill-button-contrast-disabled-fill-color#999999buttons-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#999999buttons-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#999999buttons-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#0072f0color-border-focus-neutral-default#0072f0 Border weight: 2
Border radius: 100
Contrast
Pill Button
Border color:
color-border-focus-contrast-default#60a7ffcolor-border-focus-contrast-default#60a7ff Border weight: 2
Border radius: 100
OnOverlay Light
Pill Button
Border color:
color-border-focus-contrast-default#60a7ffcolor-border-focus-contrast-default#60a7ff Border weight: 2
Border radius: 100
OnOverlay C2A
Pill Button
Border color:
color-border-focus-contrast-default#60a7ffcolor-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
Accessibility
Section titled “Accessibility”Pill Buttons are interactive components that combine text and optional icons to trigger an action. Because they are often used in dynamic contexts such as filters, tag selections, or overlays, it’s essential that they remain fully perceivable, operable, and understandable across all devices and assistive technologies.
For Design
Section titled “For Design”To ensure Pill Buttons meet accessibility standards across platforms, please follow this implementation checklist. These recommendations align with WCAG 2.2 AA and EN 301 549 standards, supporting keyboard navigation, screen readers, and assistive technologies.
Screen reader support
Section titled “Screen reader support”- Use semantic
<button>elements for all Pill Buttons. - Each button must include a descriptive text label that indicates its action or purpose.
- When used as filters or toggles, use
aria-pressed="true/false"to communicate state to assistive technologies. - Decorative icons must be hidden from screen readers (
aria-hidden="true"). - Do not use
<div>or<span>styled as buttons — these break keyboard navigation and ARIA semantics.
Keyboard navigation
Section titled “Keyboard navigation”- Buttons must be focusable via Tab and activatable with Enter or Space.
- Maintain a visible focus state at all times, following the visual reading order.
- Avoid intercepting default keyboard behaviour (e.g. arrow keys for lists or filters).
Motion sensitivity and feedback
Section titled “Motion sensitivity and feedback”- Avoid animations that trigger on hover or focus without user interaction.
- Respect the user’s
prefers-reduced-motionsystem setting to prevent motion sickness or discomfort. - Transitions should be subtle and non-essential to understanding the state change.
For Dev
Section titled “For Dev”ARIA and markup
Section titled “ARIA and markup”- Ensure the button text is always exposed to assistive technology — don’t replace it entirely with an icon.
- Provide clear ARIA roles and states for interactive variants (e.g. filters, tags, toggles).
- For asynchronous actions (spinners or loaders), add
aria-busy="true"until the action completes. - Use
aria-live="polite"regions for dynamic status updates if the button triggers content changes.
Testing and validation
Section titled “Testing and validation”- All Pill Buttons must be tested using automated accessibility tools such as Axe, Lighthouse, or Accessibility Insights before release.
- Verify focus visibility under both light and dark modes.
- Manually test with keyboard and screen readers to ensure expected behaviour.
Minimum touch area
Section titled “Minimum touch area”To ensure accessibility and ease of interaction across devices, all interactive elements — including Pill Buttons — must respect a minimum touch target size.
Absolute minimum: 24 × 24 px — This is the lowest technical requirement referenced in accessibility documentation. It ensures that the component can still be reached, but does not guarantee an optimal experience for all users.
Recommended best practice: 44 × 44 px — This follows WCAG 2.5.5 Target Size (Level AA) and EN 301 549 guidance. Provides a more comfortable interaction area for users with motor difficulties, touch devices, or when using a device outdoors. Should be considered the default requirement in our design system.
The minimum target size applies regardless of the visual size of the Pill Button. If the visible area is smaller, add invisible padding to meet the accessibility requirement. Maintain consistent spacing between pills to prevent overlapping touch areas. Consistency is key: apply the same rule across all sizes (LG, MD, SM).
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 |