Chip

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

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. More information about accessibility concerns related to nesting interactive elements can be found in the documentation.

CodeSandbox

Props

ChipProps

Signature:

export declare type ChipProps<E extends > = <E, >;

ChipOwnProps

extends, , , ,

Name	Type	Default	Description
color?		'neutral'	The color of the component. This should be chosen based on the context it's used in.
variant?		'emphasized'	Variant defining the visual representation of the component.
disabled?		false	Whether the component is disabled. If true, it cannot be interacted with.
size?		'default'	The size of the component.
maxWidth?		250	The maximum width of the component.

Chip.Prefix, Chip.Suffix

ChipContentProps

extends,

Name	Type	Default	Description
children		-	Elements to be displayed in the prefix or suffix slot.

Chip.Key

ChipKeyProps

Signature:

export declare type ChipKeyProps = & & ;

Chip.DeleteButton

ChipDeleteButtonProps

extends, , ,

Name	Type	Default	Description
disabled?		false	If a button is disabled e.g. it cannot be interacted with. By default, it inherits the disabled prop of the Chip, but can be overwritten.
onClick?		-	Called when the button is interacted with.