Chips allow users to make selections, filter content, or trigger actions.
While buttons are expected to appear consistently and with familiar calls to action, chips should appear dynamically as a group of multiple interactive elements.
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Chip w/o action button |
Ideal for filtering, where the user activates a set of options. |
--- |
Activate options |
|
Chip w/ action button |
When the user has a list of items and needs to select some of them to proceed with the action. |
--- |
Select or add items |
Anatomy
Structure
|
|
|
|
|
label |
A piece of textual information that should be concise |
|
icon |
The icon is optional and it can only be used when the chip doesn't have the add button Should be used as a complement to the label, to clarify the message by providing a visual cue |
|
action button |
When the action button is used, it means that the chip's primary purpose is to select options, rather than activating or deactivating an option |
Sizes and Spaces
|
Sizes vary from xs to m. Each size corresponds to a specific set of values for the height, paddings and gutter between elements. These values are fixed according to the chosen size, no matter the context or content. |
|
The xs toggle chip has an 8px horizontal padding and a 4px gutter. The text style is small_bold. The icon size is 16px.
The s toggle chip has a 12px horizontal padding and an 8px gutter. The text style is medium-small_bold. The icon size is 20px.
The m toggle chip has a 16px horizontal padding and an 8px gutter. The text style is medium-small_bold. The icon size is 20px.
|
|
The xs selection chip's label container has an 8px horizontal padding. The text style is small_bold. The icon size is 16px.
The s selection chip's label container has a 12px horizontal padding. The text style is medium-small_bold. The icon size is 20px.
The m selection chip's label container has a 16px horizontal padding. The text style is medium-small_bold. The icon size is 24px.
|
Properties
|
Property |
Value |
Description |
|---|---|---|
|
Size |
xs s m |
--- |
|
State |
default hover pressed disabled read-only |
--- |
|
Selected |
true false |
--- |
|
Action button |
true false |
When set to true, the action button is shown. |
|
Label |
text |
--- |
|
Icon |
true false |
When set to true, the icon of the chip is shown - only if the action button is not visible. |
Behaviour
Interaction
Responsiveness
There is no change to the component when it comes to responsiveness. The width and height depend on the content and the chip size picked.
Guidelines
|
|