Skip to main content

    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.

    Examples of Chip components with different variant property values. Examples of Chip components with different variant property values.

    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.

    Examples of Chip components with different color property values. Examples of Chip components with different color property values.

    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.

    Examples of Chip components with different size property values. Examples of Chip components with different size property values.

    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.

    Example of Chips in multiple colors that are used for visualizing statuses Example of Chips in multiple colors that are used for visualizing statuses

    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.

    Chips with labels describing the status and no icons as do and the same with icons as don't Chips with labels describing the status and no icons as do and the same with icons as don't

    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.

    Chips with labels not describing a status and with icons as do and the same without icons as don't Chips with labels not describing a status and with icons as do and the same without icons as don't

    Still have questions?
    Find answers in the Dynatrace Community