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. |