Status
Our components have different statuses depending on how they are used. This table shows all the variations of the chip according to its behavior.
|
|
Default It’s the chip default status |
Hover When a user hovers their mouse over the cross. |
|
Simple |
|
|
|
With Counter |
|
|
Actions
- When you click on the text of the chip -> customized actions (edition of the chip, ...)
- When you click on the cross -> deletion of the chip
Colors
Neutral chip
Use neutral chips when you have a list of chips or when you need to avoid visual overload.
Colored chips
If you want to link the chips to a context or an action, you can use success, warning, danger, brand, ... colors.
Size
The size of a chip can vary between 280px and 40px.
|
Max width |
Min width |
|---|---|
|
|