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 Text

  2. Dropdown Icon

  3. Dismiss Control

Variants

  1. Default

  2. Deletable

  3. Dropdown

States

  1. Default

  2. Dropdown: Hover

  3. Delete: Hover

  4. Disabled

Behaviors

Pills have a max-with if 324px

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

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.

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