Anatomy

Pill Text
Dropdown Icon
Dismiss Control
Variants

Default
Deletable
Dropdown
States

Default
Dropdown: Hover
Delete: Hover
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.

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


