Unlike Tags, Chips support complex states like "Selected," "Hover," and "Active," acting as compact buttons that can change the view or input.
Anatomy
- Container: Rounded edges with distinct borders for selection states.
- Leading Icon: Illustrative icon related to the choice.
- Label: Action-oriented or selection text.
- Selected Indicator: A trailing checkmark or visual change (e.g., filled background) when active.
Interactivity & Behavior
Pills are high interactivity components. They should be used only when an interaction is requested by the user such as selecting, filtering,
For accessibility reasons, the click area for interaction is always the full component.
The different states of the components changes based on the interaction. The interaction colors are based on the brand colors and should not be changed. There are 4 states:
- Default
- Hover
- Active
- Disabled
Variants
Pills have no variant based on color and should all the time be used with neutral color and brand interactive colors.
The only variants are the ones defining the state variants.
When to use
- Filtering: To allow users to turn a filter on or off in a list.
- Multi-Selection: Choosing multiple attributes from a predefined list.
- Action Triggers: Small, secondary actions like "Add to Calendar."
When not to use
- Pure Categorization: Use a Tag if the element is used to labels content.
- System Status: Use a Status Indicator for non-interactive states.