Chip

Use the Chip to display compact labels that communicate the status, category, or condition of an item using semantic color and emphasis.

OverviewPropertiesUsageChangelog

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.

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.