
Pill Text
Dropdown Icon
Dismiss Control

Default
Deletable
Dropdown

Default
Dropdown: Hover
Delete: Hover
Disabled

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

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