Pill Button

Rounded buttons perfect for filters, tags, and selection interfaces.

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)

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

• 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

State : Rested by Type

Neutral

Pill Button

Border color:

buttons-pill-button-neutral-rested-border-color#666666

buttons-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#333333

buttons-pill-button-neutral-rested-foreground-color#282830

Contrast

Pill Button

Border color:

buttons-pill-button-contrast-inactive-border-color#ffffff

buttons-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#ffffff

buttons-pill-button-contrast-inactive-foreground-color#ffffff

OnOverlay Light

Pill Button

Border color:

buttons-pill-button-on-overlay-light-inactive-border-color#ffffff

buttons-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#ffffff

buttons-pill-button-on-overlay-light-inactive-foreground-color#ffffff

OnOverlay C2A

Pill Button

Border color:

buttons-pill-button-on-overlay-c2a-inactive-border-color#ffffff

buttons-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#ffffff

buttons-pill-button-on-overlay-c2a-inactive-foreground-color#ffffff

State : Hover by Type

Neutral

Pill Button

Background color:

buttons-pill-button-neutral-hover-fill-color#4d4d4d

buttons-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#fbfbfc

buttons-pill-button-neutral-hover-foreground-color#ffffff

Contrast

Pill Button

Background color:

buttons-pill-button-contrast-hover-fill-color#f5f5f5

buttons-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#333333

buttons-pill-button-contrast-hover-foreground-color#282830

OnOverlay Light

Pill Button

Background color:

buttons-pill-button-on-overlay-light-hover-fill-color#f5f5f5

buttons-pill-button-on-overlay-light-hover-fill-color#a8aaac

UI_Spinner

Interface: Light

Button label

Text color:

buttons-pill-button-on-overlay-light-hover-foreground-color#333333

buttons-pill-button-on-overlay-light-hover-foreground-color#282830

OnOverlay 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#fbfbfc

buttons-pill-button-on-overlay-c2a-hover-foreground-color#ffffff

State : Active by Type

Neutral

Pill Button

Background color:

buttons-pill-button-neutral-selected-fill-color#000000

buttons-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#ffffff

buttons-pill-button-neutral-selected-foreground-color#ffffff

Contrast

Pill Button

Background color:

buttons-pill-button-contrast-selected-fill-color#ffffff

buttons-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#333333

buttons-pill-button-contrast-selected-foreground-color#15151b

OnOverlay Light

Pill Button

Background color:

buttons-pill-button-on-overlay-light-selected-fill-color#ffffff

buttons-pill-button-on-overlay-light-selected-fill-color#e4e4e4

UI_Spinner

Interface: Light

Button label

Text color:

buttons-pill-button-on-overlay-light-selected-foreground-color#333333

buttons-pill-button-on-overlay-light-selected-foreground-color#15151b

OnOverlay 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#333333

buttons-pill-button-on-overlay-c2a-selected-foreground-color#ffffff

State : Disabled by Type

Neutral

Pill Button

Background color:

buttons-pill-button-neutral-disabled-fill-color#e5e3e1

buttons-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#4d4d4d

buttons-pill-button-neutral-disabled-foreground-color#282830

Contrast

Pill Button

Background color:

buttons-pill-button-contrast-disabled-fill-color#4d4d4d

buttons-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#ffffff

buttons-pill-button-contrast-disabled-foreground-color#ffffff

OnOverlay Light

Pill Button

Background color:

buttons-pill-button-on-overlay-light-disabled-fill-color#4d4d4d

buttons-pill-button-on-overlay-light-disabled-fill-color#6c7073

UI_Spinner

Interface: Dark

Button label

Text color:

buttons-pill-button-on-overlay-light-disabled-foreground-color#4d4d4d

buttons-pill-button-on-overlay-light-disabled-foreground-color#ffffff

OnOverlay C2A

Pill Button

Background color:

buttons-pill-button-on-overlay-c2a-disabled-background-color#4d4d4d

buttons-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#ffffff

buttons-pill-button-on-overlay-c2a-disabled-foreground-color#ffffff

State : Focus by Type

Neutral

Pill Button

Border color:

color-border-focus-neutral-default#c57046

color-border-focus-neutral-default#0072f0

Border weight: 2

Border radius: 100

Contrast

Pill Button

Border color:

color-border-focus-contrast-default#ffffff

color-border-focus-contrast-default#60a7ff

Border weight: 2

Border radius: 100

OnOverlay Light

Pill Button

Border color:

color-border-focus-contrast-default#ffffff

color-border-focus-contrast-default#60a7ff

Border weight: 2

Border radius: 100

OnOverlay C2A

Pill Button

Border color:

color-border-focus-contrast-default#ffffff

color-border-focus-contrast-default#60a7ff

Border weight: 2

Border radius: 100

Size

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

• 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

Icon left

UI_Spinner

Property type: Boolean

Default: true

Icon right

UI_ArrowRight

Property type: Boolean

Default: true

Usage

Do

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).

Don’t

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

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

• Use 1–2 words for filters, 1–3 words for actions.
• Keep copy short and scannable to support responsive behaviour.

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

• Do not use generic or meaningless labels such as OK, Click, Select, or Filter.

Logical label

• The label should make sense on its own — users shouldn’t need to read nearby text to understand it.

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

• Use clear, neutral phrasing that can be easily localised.
• Avoid idioms, humour, or culture-specific references that might not translate well.

Sentence case

• Always use sentence case (e.g. Apply filter, not APPLY FILTER).

Punctuation

• Avoid punctuation unless strictly necessary (e.g. no full stops).

Styling

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

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

Develop

Styles

Rounded buttons perfect for filters, tags, and selection interfaces.

Sizes

The default size is lg.

<button class="tng-pill-button is-sm">Small</button>
<button class="tng-pill-button is-md">Medium</button>
<button class="tng-pill-button is-lg">Large</button>

Default

Small Medium Large

Contrast

Small Medium Large

States

<button class="tng-pill-button is-selected">Selected</button>
<button class="tng-pill-button" disabled>Disabled</button>

Default

Selected Disabled

Contrast

Selected Disabled

On overlay

Light

<button class="tng-pill-button on-overlay">Rested</button>
<button class="tng-pill-button on-overlay is-selected">
  Selected
</button>
<button class="tng-pill-button on-overlay" disabled>Disabled</button>

Rested Selected Disabled

CTA

<button class="tng-pill-button on-overlay is-cta">Rested</button>
<button class="tng-pill-button on-overlay is-cta is-selected">
  Selected
</button>
<button class="tng-pill-button on-overlay is-cta" disabled>
  Disabled
</button>

Rested Selected Disabled

Icons

<button class="tng-pill-button">
  <i class="tng-icon icon-ui-spinner" aria-hidden="true"></i>
  <span>Loading</span>
</button>
<button class="tng-pill-button">
  <span>Popular</span>
  <i class="tng-icon icon-arrow-right" aria-hidden="true"></i>
</button>

Default

Loading Popular

Contrast

Loading Popular

React

Description

The PillButton component renders a button with a pill-shaped design.

Pill buttons are secondary interactive elements used for filtering, tagging, or toggling options whitin 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).

Component

Properties

PillButtonProperties extends <React.HTMLAttributes<HTMLButtonElement>> which means it includes all standard HTML attributes that can be applied to a button element.

Prop	Type	Description	Optional
text	string	The text label displayed inside the pill button	❌
className	ClassValue	Custom class names applied to the button element	✅
buttonSize	'sm' | 'md' | 'lg'	Defines the size of the button	✅
isHighlight	boolean	Indicates if the button should appear highlighted	✅
isSelected	boolean	Indicates if the button is currently selected	✅
isCta	boolean	Marks the button as a Call-To-Action (CTA)	✅
onOverlay	boolean	Indicates if the button is displayed on an overlay	✅
leadingIcon	ToyotaIcon | LexusIcon	Icon displayed before the text	✅
trailingIcon	ToyotaIcon | LexusIcon	Icon displayed after the text	✅

Example

import { PillButton } from '@tmedxp/react-components';

const PillButtonExample = () => {
  return <PillButton text="Pill Button" />;
};

export { PillButtonExample };

Accessibility

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

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

• 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

• 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

• Avoid animations that trigger on hover or focus without user interaction.
• Respect the user’s prefers-reduced-motion system setting to prevent motion sickness or discomfort.
• Transitions should be subtle and non-essential to understanding the state change.

For Dev

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

• 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

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).

Usage

Do

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).

Don’t

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

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

• Use 1–2 words for filters, 1–3 words for actions.
• Keep copy short and scannable to support responsive behaviour.

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

• Do not use generic or meaningless labels such as OK, Click, Select, or Filter.

Logical label

• The label should make sense on its own — users shouldn’t need to read nearby text to understand it.

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

• Use clear, neutral phrasing that can be easily localised.
• Avoid idioms, humour, or culture-specific references that might not translate well.

Sentence case

• Always use sentence case (e.g. Apply filter, not APPLY FILTER).

Punctuation

• Avoid punctuation unless strictly necessary (e.g. no full stops).

Styling

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

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