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