Chip

Chips display user selections or search terms.

Anatomy

Item	Name	Description	Component
1	Container	Holds the Chip's content.	-
2	Text	The Chip's text content.	-
3	Close	Enables users to remove the Chip.	Bare Icon Button

Chips have a fixed height, with the width determined by the label's length.

Sizing

Property	Value	Token
Height	24px	sizing.300
Width	Auto	-

Item	State	Description
1	Default	The default style before user interaction.
2	Hover	Indicates interactivity when the user hovers over the Chip.
3	Active	Indicates the state when the user clicks or presses on the Chip.

Variant	Property	Value	Token
1. Close: True	Padding left	8px	spacing.100
	Padding right	4px	spacing.50
	Gap	4px	spacing.50
2. Close: False	Padding left	8px	spacing.100
	Padding right	8px	spacing.100

A disabled chip remains visible in the interface, indicating that an action is temporarily unavailable but still relevant in context.

An error chip draws attention to a problem that requires resolution, often used in forms or interactive elements where validation is needed.

Chips include a Close button by default, allowing users to remove them from the interface when needed.

Item	Value	Description
1	true	Displays the Close button.
2	false	Hides the Close button.