Skip to main content

    Chip

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

    OverviewPropertiesUsage

    Import​

    import { Chip } from '@dynatrace/strato-components-preview/content';

    Use cases​

    CodeSandbox

    Remove a Chip​

    You can add a DeleteButton to the Chip to allow removing it. This comes with a default 'Delete Chip' translation used for the aria-label. If necessary, you can also override it with a different translation by setting the aria-label.

    CodeSandbox

    Display key-value pairs​

    The Chip can also display key-value pairs. The key is shown before the value and separated with a :.

    CodeSandbox

    Add a prefix or suffix slot​

    You can render icons at the beginning and the end of the Chip by using the Chip.Prefix and Chip.Suffix slots.

    CodeSandbox

    Change the color​

    You can use the color prop to style the Chip with a different color. If no color is specified, it's set to neutral.

    CodeSandbox

    Change the variant​

    You can use the variant prop to create the different variants. If no variant is specified, it's set to emphasized.

    CodeSandbox

    Change the size​

    You can use the size prop to set a smaller or bigger Chip size. If no size is specified, it's set to default.

    CodeSandbox

    Change the maximum width​

    The Chip is as wide as its content by default and has a default maximum width of 250px. You can change that by setting the maxWidth prop to a different value.

    CodeSandbox

    Disable the Chip​

    You can use the disabled prop to disable the Chip. If it's disabled, the user can no longer interact with it and it has no interactive styles. If no disabled prop is specified, it's set to false.

    CodeSandbox

    Polymorph the Chip​

    The Chip can be polymorphed to a different component, which could be interactive. So the whole content added inside the Chip other than the Chip.DeleteButton is then polymorphed to the specified component. The DeleteButton is excluded because it's already a button, so if you polymorph the entire Chip content to a button for example, this would nest interactive components.

    This is also the reason why you shouldn't add an interactive component to the Chip.Key when the entire Chip is interactive. The same applies to the Chip value, so in case you add an interactive component inside the Chip, you would be nesting interactive elements.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community