Pill

Pills are small, rounded UI elements used to display concise information such as labels, categories, statuses, or filters. They help users quickly scan and interact with key details without overwhelming the interface.

This page provides guidance on when and how to use pills effectively, including accessibility best practices, implementation details, and design considerations in line with WCAG and UK Government Digital Service (GDS) standards. View this component on GitHub

Contents

Basic

Pills are often used in navigation, tagging systems, and filtering interfaces. They can be static (display-only) or interactive, allowing users to select, remove, or modify them.

<admiralty-pill text="Filter One"></admiralty-pill>

<admiralty-pill text="Filter One"></admiralty-pill>

<AdmiraltyPill text="Filter One"></AdmiraltyPill>

Colour

  • Sufficient contrast between text and background to meet WCAG 2.1 AA standards.
  • Colour is not the only way information is conveyed — use text, icons, or patterns where necessary.
  • Consistency across the design system to avoid confusion and improve user experience. Consider using predefined colour options to maintain uniformity and accessibility across services.
<admiralty-pill text="Filter One" colour="admiralty-blue"></admiralty-pill>
<admiralty-pill text="Filter One" colour="white"></admiralty-pill>
<admiralty-pill text="Filter One" colour="bright-blue"></admiralty-pill>

<admiralty-pill text="Filter One" colour="admiralty-blue"></admiralty-pill>
<admiralty-pill text="Filter One" colour="white"></admiralty-pill>
<admiralty-pill text="Filter One" colour="bright-blue"></admiralty-pill>

<AdmiraltyPill text="Filter One" colour="admiralty-blue"></AdmiraltyPill>
<AdmiraltyPill text="Filter One" colour="white"></AdmiraltyPill>
<AdmiraltyPill text="Filter One" colour="bright-blue"></AdmiraltyPill>

Number

Number pills are used to display numerical values, such as unread messages, notification counts, or selected filters. They provide a quick visual reference for users without taking up too much space.

Best Practices when using number pills:

  • Update dynamically, if the number represents real-time data (e.g., unread notifications), ensure it updates automatically.
  • Consider accessibility, screen readers should announce the meaning of the number, not just the figure itself (e.g., "3 new messages" instead of "3").
<admiralty-pill text="Filter One" number="5"></admiralty-pill>
<admiralty-pill text="Filter One" number="50"></admiralty-pill>
<admiralty-pill text="Filter One" number="500"></admiralty-pill>

<admiralty-pill text="Filter One" number="5"></admiralty-pill>
<admiralty-pill text="Filter One" number="50"></admiralty-pill>
<admiralty-pill text="Filter One" number="500"></admiralty-pill>

<AdmiraltyPill text="Filter One" number="5"></AdmiraltyPill>
<AdmiraltyPill text="Filter One" number="50"></AdmiraltyPill>
<AdmiraltyPill text="Filter One" number="500"></AdmiraltyPill>

Selected

Selected pills indicate an active choice, often used in filters, multi-select options, or tagging systems. A tick icon helps reinforce selection visually.

Best Practice for selected pills:

  • Use clear visual cues, combine the tick icon with a colour change to make selection obvious.
  • Allow deselection, users should be able to remove a selected pill easily, by clicking it again.
  • Maintain accessibility, screen readers should announce that the pill is selected, using attributes like aria-selected="true" or aria-checked="true".
<admiralty-pill text="Filter One" selected={{true}}></admiralty-pill>

<admiralty-pill text="Filter One" selected={true}></admiralty-pill>

<AdmiraltyPill text="Filter One" selected={true}></AdmiraltyPill>

Accessibility

Provide detailed instructions to ensure the "Pill" component is accessible to all users:

Screen Reader Compatibility : Ensure that screen readers can accurately interpret and convey the content and purpose of each pill. This may involve using appropriate ARIA roles and labels.

Keyboard Navigation: Confirm that users can navigate and interact with pill elements using keyboard controls alone, facilitating accessibility for those with motor impairments.

Colour Contrast: Adhere to WCAG guidelines by maintaining sufficient contrast between pill text and background colours to assist users with visual impairments.

Content Design

Clarity: Keep pill text concise and descriptive to ensure users quickly understand its purpose.

Consistent Terminology: Use uniform language across all pills to prevent confusion and enhance user experience.

Avoid Overuse: Utilise pills carefully to prevent overwhelming users with excessive information.

Implementation (technical specifications for developers)

Props: List configurable properties, such as text content, colour variants, and selectable states.

Events: Detail events emitted by the component, like selection or removal actions.

CSS Custom Properties: Offer information on customizable CSS variables for styling purposes.

Privacy PolicyAccessibility