Chip
Also known as: Pill, Token, Lozenge
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | Sm | Md | Md |
Selected Boolean | true | false | false |
State Variant | Default | Hover | Focus | Disabled | Default |
Has start item Boolean | true | false | true |
Start item InstanceSwap | Any icon | heart |
Label Text | string | Label |
Has end item Boolean | true | false | true |
End item InstanceSwap | Any icon | close |
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.
Size
Dimensions of the chip are tied to the global scale tokens. This ensures that the components, especially forms, with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
--scale-width-<size>
--scale-height-<size>
--scale-padding-<size>
--scale-gap-<size>
--scale-radius-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>
Variants
Some common variants are already created and ready to use (see the table), but you have the possibility to add new variants or customize every visual aspect through tokens and token modes.
| Variant | When to use |
|---|---|
Fill | Fill variant emphasizes visibility and interaction priority. Visually, it has high contrast compared to its surroundings. |
Outline | Outline variant blends more with the surroundings, but is separated from the background with a border. |
Behaviour
Selection
Chip has two selection states:
- Usually,
uncheckedchips are used as default, in case if user should manually select relevant filters or options. - Depending on the context,
checkedchips are used as default in scenarios, where commonly or previously used filters are pre-selected.
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. |