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.

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

Anatomy

Anatomy

  1. Pill Text

  2. Dropdown Icon

  3. Dismiss Control

Variants

Variants

Variants

  1. Default

  2. Deletable

  3. Dropdown

States

States

States

  1. Default

  2. Dropdown: Hover

  3. Delete: Hover

  4. Disabled

Behaviors

Behaviors

Behaviors

Pills have a max-with if 324px

Best Practices

Best Practices

Best Practices

1. Multiple pills

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

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.

Content

Beta

Content

Beta

Content

Beta

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.

Keep pill text short and easy to scan.

More

More

More

Related Components

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

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

Need more guidance?

Suggest an addition or an edit.

© 2025 Basis Technologies
© 2025 Basis Technologies
© 2025 Basis Technologies