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. Clear

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

2. Concise

Pill text should be concise. Pill text should be short and easy to scan

3. Multiple pills

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

4. 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.

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