
Pill Text
Dropdown Icon
Dismiss Control

Default
Deletable
Dropdown

Default
Dropdown: Hover
Delete: Hover
Disabled

Pills have a max-with if 324px
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.

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.

Related Components
Additional Reading
“Web Content Accessibility Guidelines (WCAG) 2.0.” W3C, www.w3.org/TR/WCAG20/.
Tagging Design Pattern https://ui-patterns.com/patterns/Tag