Last Updated on Sep 29, 2022
Chips are labels used to describe or highlight information. They’re commonly used to indicate status. They can also contain icons which give them some ability for interaction.
- Chips are compact elements. They should be concise and clearly worded. Labels should not exceed 16 characters.
- Position chips close to the object they relate to. This helps clarify the information they convey.
- When displaying the number of selections with an info chip, use the blurple chip. The only exception is when the # of selections is zero. Then, use gray.
- A great use of info chips is whenever you need to show status, especially in a table.
Do's and Don'ts
Use to show a status update on a piece of information or action.
Use when you want to highlight something that has been added recently.
Use established color patterns to identify importance or status.
In tables, chips are excellent choices for data with limited options
Position chips so it’s clear the object it relates to.
Don’t make a chip clickable. Icons inside of chips can be.
Don’t use colorful chips haphazardly. Red should correspond to danger. Orange or yellow should correspond to warning. Green should correspond to success. Use other color colors more
Don’t use aqua chips in combination with red chips. Use the green chip instead.
Don’t add dragging to chips unless there is another way to do the same action. Dragging should always be a supplementary feature.
Table of ContentsComponent VariantsDesign PrinciplesDo's and Don'ts