Chip Component

A chip component.

Properties

Name	Type	Default	Description
disabled	boolean	false	Whether the chip is disabled.
selected	boolean	false	Whether the chip is selected.
size	'sm' | 'md'	'md'	The size of the chip.
hasIcon	boolean	false	Whether the chip has icon.

Slots

Name	Description
default	Default content slot for chip text.
icon	Slot for an optional icon.

CSS Parts

Name	Description
chip	The button element representing the chip.

Check this link to learn how to use CSS parts for Chip Component.

CSS Properties

Token	Default	Description
--tap-font-family	--tap-sys-font-family	The font family used in the chip.
--tap-chip-font-size	--tap-sys-typography-body-sm-size	The font size for the chip's content.
--tap-chip-line-height	--tap-sys-typography-body-sm-height	The line height for the chip's content.
--tap-chip-border-radius	--tap-sys-radius-full	The border radius for the chip.
--tap-chip-border-color	--tap-sys-color-border-primary	The border color of the chip.
--tap-chip-background-color	--tap-sys-color-surface-primary	The background color of the chip.
--tap-chip-color	--tap-sys-color-content-primary	The text color of the chip.
--tap-chip-horizontal-padding	--tap-sys-spacing-4	The horizontal padding inside the chip.
--tap-chip-min-width	72px	The minimum width of the chip.
--tap-chip-icon-gap	--tap-sys-spacing-4	The gap of the icon slot in the chip.
--tap-chip-selected-background-color	--tap-sys-color-surface-secondary	The background color of a selected chip.
--tap-chip-selected-border-color	--tap-sys-color-surface-inverse-primary	The border color of a selected chip.
--tap-chip-disabled-color	--tap-sys-color-content-disabled	The text color of a disabled chip.
--tap-chip-selected-and-disabled-color	--tap-sys-color-border-primary	The border color of a selected and disabled chip.
--tap-chip-group-sm-height	--tap-sys-spacing-9	The height of the chip in small size.
--tap-chip-group-md-height	--tap-sys-spacing-10	The height of the chip in medium size.