Chip

Use the Chip component to present a piece of information in a compact form.

OverviewPropertiesUsage

Variants

Chips come in two emphasis levels that help to manage the required attention.

Emphasized

• Use the emphasized variant for subtle callouts and when displaying many chips in the same context. For example, to highlight newly added items in a table or to categorize content.
• Emphasized chips blend nicely with the rest of the user interface. Use them for most chips.

Accent

• Use the accent variant for chips that need to draw extra attention. For example, a status next to the main title in a detail view.
• Avoid using too many accent chips in the same view. They can quickly overwhelm users and reduce the visual importance of other elements, such as accent Buttons.

Colors

Chips come in five colors. Each of them has a different semantic meaning.

Never use color alone to communicate a condition. Instead, combine it with a descriptive label to ensure an accessible experience.

Neutral

• Use the neutral color if you don't want to indicate a positive or negative condition or if you need no particular emphasis—for example, categorized content or applied filters.

Primary

• Use the primary color to highlight a condition without conveying concern. For example, if something is in progress or to highlight new features.
• Always use the primary color when placing a chip on a primary background—for example, chips in a primary-colored Container.

Success

• Use the success color to indicate positive conditions—for example, if an action went well or a resource is healthy.
• Avoid over-using it to keep the emphasis on problematic conditions that require attention.
• Always use the success color when placing a chip on a success background—for example, chips in a success-colored Container.

Warning

• Use the warning color to indicate an upcoming or potential negative condition—for example, if users should be aware of something that doesn't require immediate attention.
• Always use the warning color when placing a chip on a warning background—for example, chips in a warning-colored Container.

Critical

• Use the critical color to indicate a negative condition. For example, if an action went wrong or a resource is unhealthy.
• Always use the critical color when placing a chip on a critical background—for example, chips in a critical-colored Container.

Sizes

Chips come in two sizes: default and condensed.

Default

• Use the default size for interactive chips to increase the click target. For example, if a chip is removable or clickable.

Condensed

• Use the condensed size in compact layouts or to align chips better with other components or component parts—for example, in condensed tables or next to a tab's label.