UI Pills: What They Are, How to Implement Them, and Mistakes to Avoid

In the world of interface design, it’s often the smallest components that have the biggest impact on the user experience. One of these elements, as ubiquitous as it is powerful, is the “pill.” This discreet, rounded rectangle is a fundamental tool for creating filters, displaying selections, and organizing information in a clear and interactive way. But what makes a “pill” truly effective?

This article is a complete guide to mastering this component. We’ll explore what it is exactly, how it differs from similar elements like “tags” and “badges,” and give you the best practices for design, code implementation, and most importantly, accessibility, so you can use them like a pro.

What Exactly is a “Pill” in Web Design?

A pill is a visually distinctive interface component, shaped like a rectangle with fully rounded corners. Its purpose is to contain a small amount of information, such as a label, a filter, or a category name. Although the term “pill” refers to its appearance, its true value lies in its function.

The Difference is Function: Pills vs. Tags, Chips, and Badges

It’s easy to confuse these terms, but the distinction is key to good design:

  • Badges: These are static and their only function is to inform. Think of the notification counter on an icon (“3”) or a “New” label. They are not interactive.
  • Tags, Chips, and Pills: These terms are often used interchangeably to describe labels that can be interactive. Their main function is categorization, filtering, or selection. A “pill” or a “chip” is, in essence, a visual style of an interactive “tag.”

The golden rule: If the user can’t click or interact with it, it’s probably a badge. If it allows for filtering, selecting, or removing, it’s a tag (styled as a pill or chip).

Best Practices for Effective Pill Design (UI/UX)

Good pill design goes beyond a border-radius. It’s about clarity, consistency, and usability.

  • Clarity and Conciseness: The text inside a pill should be brief and to the point. Ideally, one or two words. If you need a sentence, this is probably not the right component.
  • Visual Consistency: Maintain a consistent style for all pills that serve the same function. If filter pills are blue, they should all be blue. Inconsistency confuses the user.
  • Generous Spacing (Padding): Internal space is crucial for readability and for making them easy to tap on touch devices. A good reference, inspired by frameworks like Bootstrap, is a vertical padding that is half of the horizontal padding (e.g., padding: 0.5em 1em;).
  • Contrast and Color: Ensure sufficient color contrast between the text and the background to meet accessibility guidelines (WCAG), which recommend a minimum ratio of 4.5:1. A useful technique is to use background colors with reduced opacity for a softer, more visually integrated look.
  • Clear Interactive States: An interactive pill must communicate its state at all times. Define clear visual styles for:
    • :hover (when the cursor is over it)
    • :focus (when navigating with the keyboard)
    • :active (while being pressed)
    • disabled (when the option is not available)

How to Implement Pills: From HTML to CSS

Creating a pill is simple, but doing it right requires the correct semantic structure.

The Semantic Structure (HTML)

The HTML tag you use will depend on the pill’s function:

  • <span>: For purely decorative pills or static labels.
  • <a>: If the pill functions as a navigation link (e.g., a click takes you to a category page).
  • <button>: The correct and most accessible option if the pill performs an action on the current page, such as applying or removing a filter.

For a pill that can be removed (very common in filters), the correct pattern is a container with a nested close button.

HTML

<div class="pill-container">
  <span>Applied Filter</span>
  <button class="pill-remove-button" aria-label="Remove filter: Applied Filter">
    &times;
  </button>
</div>

Fundamental Styles (CSS from Scratch)

You don’t need a framework to create an elegant pill. Here’s the essential CSS:

CSS

.pill-container {
  display: inline-flex; /* Aligns the text and button */
  align-items: center;
  gap: 0.5em; /* Space between text and button */
  
  background-color: #e0e0e0;
  color: #333;
  font-size: 0.875rem;
  
  padding: 0.5em 1em;
  border-radius: 9999px; /* The trick for a perfect pill shape */
}

.pill-remove-button {
  /* Reset default button styles */
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  
  /* Button style */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  background-color: rgba(0,0,0,0.1);
  color: #333;
  border-radius: 50%;
  font-weight: bold;
}

.pill-remove-button:hover,
.pill-remove-button:focus {
  background-color: rgba(0,0,0,0.2);
  outline: 2px solid blue; /* For a visible focus */
}

The Overlooked Key: Making Your Pills Accessible (a11y)

A beautiful design is useless if not everyone can use it. Accessibility is not an option; it’s a requirement.

  • Function Over Form: If your pill is for removing a filter, it must be a <button>. This gives it native semantics and makes it operable for assistive technologies.
  • Indispensable ARIA Attributes: Context is vital for screen reader users. A button with an “X” says nothing. Use aria-label to describe the action explicitly.
    • Incorrect: <button>X</button>
    • Correct: <button aria-label="Remove color filter: Blue">X</button>
  • Keyboard Navigation: By using a native <button>, keyboard navigation (Tab to focus, Enter/Space to activate) will work automatically. Just make sure the :focus state has a clear visual indicator (an outline).

5 Common Mistakes When Using Pills (and How to Avoid Them)

  1. Visual Noise from Overuse: Using them for everything dilutes their purpose. Reserve them for grouping, filtering, or labeling key information. They are not a replacement for plain text.
  2. Visual and Functional Inconsistency: Mixing different styles and functions (some are links, others are buttons, others are text) without a clear logic creates an unpredictable and frustrating user experience.
  3. Content That’s Too Long: Pills are designed for brevity. Forcing long phrases into them breaks the design and readability.
  4. Interactive Ambiguity: The user should know instantly if a pill is interactive or static. Use visual cues like the mouse cursor (cursor: pointer) and hover states to indicate interactivity.
  5. Ignoring Accessibility: This is the most serious mistake. Not using correct HTML semantics or failing to provide ARIA labels excludes a portion of your users and shows a lack of professionalism.

What should we keep?

The “pill” component is much more than a simple rounded rectangle; it is a precise tool for improving interface navigation and organization. As we’ve seen, its success depends not only on its appearance but on a combination of clear design, semantic implementation, and, above all, a commitment to accessibility.

By remembering that function dictates form, maintaining consistency, and prioritizing all users, you can transform these small pills of information into elements that make your designs more intuitive, efficient, and inclusive.

Categories: ,

H.T.R. Blog