Skip to main content

Chip

Use the Chip to display compact labels that communicate the status, category, or condition of an item using semantic color and emphasis.

OverviewPropertiesUsage

When to use​

  • To display compact labels that communicate the status, category, or condition of an item.
  • When the label needs to be visually distinct from surrounding text.

When not to use​

  • When users need to trigger an action. Use Button instead.

Variants​

Chips come in two emphasis levels that help to manage the visual emphasis of the chip.

Two Chip variants: Emphasized with a subtle appearance as the default, and Accent with higher visual prominence. Two Chip variants: Emphasized with a subtle appearance as the default, and Accent with higher visual prominence.

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. This is the default variant.

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 Button components.

Colors​

Chips come in five colors. Each 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.

Five Chip colors — Neutral, Primary, Success, Warning, and Critical — each shown in Emphasized and Accent variants. Five Chip colors — Neutral, Primary, Success, Warning, and Critical — each shown in Emphasized and Accent variants.

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.
Tip

Learn more about the semantic meaning of colors in Status and health.

Sizes​

Chips come in two sizes: default and condensed.

Two Chip sizes: Default for interactive chips, and Condensed for compact layouts. Two Chip sizes: Default for interactive chips, and Condensed for compact layouts.

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.

Chips as status indicators​

Chips are commonly used to communicate the status or condition of objects or processes. Choose the chip color according to the condition and the chip variant according to the importance of the condition.

Chips in all colors and variants used as status indicators, each pairing with a descriptive label, such as "Healthy", "In progress", and "Not available". Chips in all colors and variants used as status indicators, each pairing with a descriptive label, such as "Healthy", "In progress", and "Not available".

Whenever possible, use clear and concise labels to indicate statuses. Don't use an additional icon in chips if you're already describing the status with the label.

Example of correct Chips labeled "Healthy" and "Unhealthy" with no icons, and incorrect ones adding a redundant icon when the label already conveys the status. Example of correct Chips labeled "Healthy" and "Unhealthy" with no icons, and incorrect ones adding a redundant icon when the label already conveys the status.

If you use the label for something else, for example, to describe a context or for a count, use an icon as a prefix to ensure accessibility. Never use color alone to convey meaning.

Example of correct Chips labeled "Memory", "CPU", and "8" with prefix icons conveying status, and incorrect ones with the same labels but no icons. Example of correct Chips labeled "Memory", "CPU", and "8" with prefix icons conveying status, and incorrect ones with the same labels but no icons.

Still have questions?
Find answers in the Dynatrace Community