What are pills in web design?

A pill is a shape, not a single fixed component

When someone asks what a pill is in web design, they usually mean a small, fully rounded element on a page or in an app. That shape is what “pill” describes.

It’s a visual style, not a fixed component that always works the same way.

The same shape can do different jobs. Sometimes a pill only displays information, like a status label.

Other times it is clickable. It may be a filter that a user turns on and off. It may also be a choice that a user can remove. The shape alone does not show which type it is. That is why design systems use different names.

How component names differ across design systems

A design system is a company’s shared set of rules and ready-made components for building sites or apps consistently. Not every system uses the word “pill.”

Two sources use the word “pill” directly.

Source	Term used	What it does
Bootstrap	Pill badge	A fully rounded badge style, using the .rounded-pill class
Refinitiv Element Framework	Pill	A small button-style element for showing selected items, with optional toggle and remove options

Other systems use different terms for similar labels.

Source	Term used	What it does
Fluent 2	Tag	Shows a value someone picked, like an email recipient, and can be removed
GOV.UK Design System	Tag	Shows a status, such as active or completed
USWDS	Tag	Draws attention to new or categorized content, or filters results
Atlassian Design System	Tag	A compact label for categorizing content
Android Jetpack Compose	Chip	Four interactive chip types (assist, filter, input, suggestion) for Android apps

These tags and chips are not called pills in their own guides. Also, Android chips are a mobile example rather than a web standard.

Check how a rounded element behaves rather than guessing from its name.

Static pills versus interactive pills

The more useful question than naming is whether a pill is static or interactive. A static pill shows information and isn’t meant to be clicked.

An interactive pill invites an action. A user may select, switch, or remove it.

Refinitiv’s ef-pill shows the interactive kind. It can switch between active and inactive states. It can also have a remove button and a stored value.

The same component can also be a plain label. Refinitiv notes that a developer can give it a presentation role. Screen readers then treat it as text instead of a clickable item.

Mixing the two causes problems. A static pill styled like an interactive one may invite clicks that do nothing.

An interactive pill that looks like a plain label may hide its purpose. A clear visual difference lowers that risk. The design should also match similar items on the page.

Getting these details right during a build is the kind of work that happens during hand-built, tested front-end development.

Accessibility for pills that act as buttons

Not every selectable pill needs full button behavior. However, a pill that starts an action needs more care. Filters and dismiss buttons must work for keyboard and screen reader users.

An accessible label is the name a screen reader announces. It often comes from the visible text. Choosing a component does not make a good label automatic. The label must still explain what the pill does.

Refinitiv’s ef-pill builds this label from the pill text. It also uses a button role by default. In toggle mode, the pill switches between two states, such as on and off. It then manages the aria-pressed value so users can learn its state.

That aria-pressed requirement applies to toggle buttons specifically. An ordinary action button, one performing a single action without switching states, doesn’t need a pressed state.

Any pill that acts like a button should respond to Enter and Space. This follows the W3C’s button pattern. Bootstrap also warns against using color as the only signal. Screen readers do not convey color.

Matching pill behavior to the right use case

A pill generally plays one of four roles. A static label displays information only.

A navigation link takes someone to another page. Standard links already support keyboard use. A normal action button performs one task without a pressed state.

A toggle button switches between two states and needs that state exposed through aria-pressed.

Name the pill’s role before it is built. This gives designers and developers the same view of what it should do.

Frequently Asked Questions About Pills in Web Design

If a pill’s label is too long for a mobile screen, does the text wrap inside it?

Not necessarily. Fluent 2 describes reflow as tags moving onto the next line when a group doesn’t fit, not text wrapping inside one tag.

That fixes a crowded row, not one label wider than the screen. Keep labels short and test actual small-screen behavior.

How does a user remove a pill they’ve selected?

Refinitiv’s clears setting adds a visible remove button. It also lets the pill respond to the Delete key. Check both options when planning a similar pill.

Beyond color, what should show a pill is selected?

Android’s filter chip pairs its selected state with a checkmark. It does not rely on color alone. A visible icon and a code-level state like aria-pressed give users two signals.

What details should I hand a developer when specifying a pill?

Refinitiv lists active, clears, disabled, readonly, toggles, and value. These settings form a useful checklist. They describe how the pill works, not just how it looks.

How do I decide whether a pill should be a button or a link?

The W3C’s button pattern notes that buttons and links serve different purposes, and appearance should match function. A pill that triggers an action should be a button.

One that navigates elsewhere should use link behavior.

How can I confirm a finished pill is actually accessible?

USWDS recommends testing your specific implementation directly rather than assuming accessibility because it’s based on a tested design system.