Chip

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

OverviewPropertiesUsage

Import

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

Demo

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

Display key-value pairs

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

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

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

Change variant

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

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

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

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

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