Overview
Chips allows user to select filters/actions. Commonly found in sheets, this component allows for granular filtering based actions that help users accomplish their needed tasks.
Key Features
Within the chips component there are two states (default and active) that represent key actions. Alongside these states there are configurable icons that provide addition context to users.
- Space for chip label
- Configurable icon that provides addition context
- Closable icon
Usage
Chips should be included with a relevant label along with active chips being shown first.
Groups of chips should not be overly lengthy as to avoid overloading users.
Avoid placing a couple of chips in a page without appropriate labelling.
If applied to an active chip, the clearable icon should be shown for all active chips in the group.
Don't alter the clearable icon from the simple close icon.