Chip
Also known as: Pill, Token, Lozenge
Preview
Resources
Properties
Property | Values | Default |
---|---|---|
Variant Mode | Fill | Soft | Outline | Fill |
Size Variant | Sm | Md | Md |
Selected Variant | Default | Active | Default |
State Variant | Default | Hover | Focus | Disabled | Default |
Start item Boolean | true | false | true |
Label Text | string | Label |
End item Boolean | true | false | true |
When to use
When users need to select or deselect multiple options, such as product filters or multi-select forms.
When wanting to provide compact actions for the users, such as adding/removing items or mentions.
If users needs to perform an action with confirmation, use button instead.
If the labels are static and simply serve as descriptors or categories, use tag instead.
If the list of choices is too long, consider using a select instead.
Variants
Variants define the visual appearance of components and communicate the priority of the action or information they represent. Some common variants are provided out of the box (see the table below), but you can also create new variants to match your system's needs.
Variants are created and managed through variable modes in the design system tokens.
Variant | When to use |
---|---|
Fill | Used as a primary component style to display highest priority. Visually, it has high contrast compared to its surroundings. |
Soft | Used as a complimentary style, uses less contrasting fill color. |
Outline | Outline components blend more with the surroundings, but are separated from the background with a border. |
States
Chip (and all other forms and selection controls) express states. States indicate current condition of the component to someone interacting with it. Using states ensure clear user feedback, highlighting possible actions or barriers. We have included most common states:
State | Context |
---|---|
Default | Status of the component before the interaction. Also referred to as ‘resting’. |
Hover | When the user moves their cursor over the component, but is not taking the action. Slight visual change can indicate interactivity of the component. |
Focus | When user selects the component via keyboard navigation, but has not yet taken action on it. |
Disabled | A non-interactive state where the component appears faded or grayed out. It indicates that the action is unavailable at the moment. |