Pill

ECT approvedUpdated May 21, 2026

Tag

Description

A pill is a compact visual indicator that highlights information or status.

Figma library

Anatomy

Anatomy

Type

Fixed

With left icon

Removable

Variations

Style

Standard fixed and removable pills can be filled or outlined.

Outlined

Filled

Color

Primary function is status. For example, green for positive and red for negative information.
Secondary function is categorization. See available colors below.
Standard fixed and removable pills can use all color variants.

Warning

Semantic color See the Semantic Color Guide for recommendations on color meaning and usage standards.

Grey

Red

Orange

Green

Blue

Purple

Teal

Lime

Pink

Slate

Color mode

Light

Dark

Warning

Inverse styling Inverse-styled pill components can be used for light mode scenarios where a specific element needs a dark mode appearance. For example, a pill inside an active or selected table cell. They are not a substitute for dark mode. For full dark-themed interfaces, always use the actual dark mode instead of applying inverse-styled components.

Best practice

Choose a pill variant based on how much it needs to stand out within the UI:
Use brightly colored filled pills for important statuses that require user attention (overdue/ready to process).
Use more muted outlined pills for less important statuses that require less attention (completed).
When screens are busy with lots of other visual elements, use outlined pills so as to not overwhelm the user.

Pill usage in a table

Dos and don'ts

Don't

Other names

Tag

Technical example

Pill component implemented in Carbon

Requirements

Users should be able to:

Identify and understand the purpose of each pill.
Remove interactive pills using assistive technology.
Understand the relationship between pills and the content they are related to.

Interactions

Keyboard interactions

There are no interactions for the fixed pill variant. For the removable variant:

Tab. Moves focus from the previous interactive element on the page to the ‘remove pill' button.
Enter or Space. Removes the selected pill.
When a pill is removed, focus should be moved to the next pill.

Design Considerations

Pills should have a 4.5:1 contrast ratio between the text and the background colour of the pill.
Pills should be visually distinct from buttons, so that users do not confuse the two.
If pills are interactive, provide adequate separation between pills for easy touch and mouse interactions.
The ‘remove pill’ button should have a minimum target size of 24x24px to allow users to easily target the pill area.
Provide clear context for pills using clear, visible labels or other content surrounding the pill.

Development Considerations

If the context of the pill is not clear from surrounding content, then visually hidden text should be used to help provide context
Visually hidden text for a pill could include: ‘Category:’ followed by ‘New client’.
If pills have a thumbnail image, these images should have nulled alt text: (alt=””).
'Remove pill' buttons should have clear, unique aria-labels describing the purpose and relationship between the pill and the remove button.
The aria-label should clearly describe the action, such as ‘remove overdue status filter’.

Date	Changes
October 2025	Removed Custom Pill.Removed Thumbnail variation.Changed Status to Color.
August 2025	Updated guidance on the accessibility tab.
May 2025	Added a callout highlighting the availability of inverse-styled pill components in Figma, intended for light mode scenarios.Updated and fixed dismissible hover colours in both standard and inverse components.Added custom colours variation.Added 'important' variant.Removed 'read-only' variant.Updated guidance around hyphenation and text wrapping onto multiple lines.
February 2025	Added usage guidance block with some examples.
September 2024	New version created. Previous version archived in the frozen Product design system.