Ready

Pill

Pills are interactive elements that are displayed based on user inputs or filters. Pills should make it easier for the users to interact with and manipulate content and data.

Ready

Pill

Pills are interactive elements that are displayed based on user inputs or filters. Pills should make it easier for the users to interact with and manipulate content and data.

Anatomy

  1. Pill Label

  2. Pill Text

  3. Dropdown Icon

  4. Dismiss Control

Variants

  1. Default

  2. Deletable

  3. Dropdown

  4. Error

Size

  1. Default

  2. Large

States

  1. Default

  2. Dropdown: Hover

  3. Delete: Hover

  4. Disabled

  5. Selected

Behaviors

Pills have a max-with if 324px. The pill text will truncate once this width is reached.

Best Practices

1

Multiple pills

Multiple pills should display in-line. Pills should be separated with 1 core unit See Spacing for unit values.

Do

Don't

2

Delete a Pill

The "Pill-delete" setting gives the user the ability to remove the pill. When a pill is removed, the other pill should shift to the left to fill the space.

Do

Content

Pill text labels should clearly represent the user input that generated them. If the input contains text, that text should be used in the pill.

1

Pill text

Cursus Lorem Tellus Consectetur Sem

Do

Don't

2

Short

Keep pill text short and easy to scan.

Do

Don't

More

Related Pages

Additional Reading

  1. “Web Content Accessibility Guidelines (WCAG) 2.0.” W3C, www.w3.org/TR/WCAG20/.

  2. Tagging Design Pattern https://ui-patterns.com/patterns/Tag

© 2026 Basis Technologies
© 2026 Basis Technologies
© 2026 Basis Technologies