Chip | Calcite Design System

Chips are commonly used in filtering and as categorical identifiers. Chips can be contained within a Chip Group to provide keyboard functionality, consistent spacing, and facilitate selection workflows and filtering patterns.

Overview

Chips are small, feature-rich components that can be used independently or in groups. Chips are used in Combobox and other scenarios that have a filtering interaction.

Chips can be themed to convey a variety of information, can contain Icons, Avatars, or images as visual cues. Additionally, Chips can be closed and visually hidden by a user.

Sample

Usage

Labeling
Status badges
Contextual counts or context for information.

Accessibility

Key	Function
`Tab`	When `closable` is `true`, moves focus in and out of the "Close" button.
`Tab` and `Shift`	When `closable` is `true`, moves focus in and out of the "Close" button.
`Enter`	When `closable` is `true` and focus is on the "Close" button, hides the component.
`Space`	When `closable` is `true` and focus is on the "Close" button, hides the component.

API reference

Properties

Property	Attribute	Description	Type	Default
appearance	appearance	Specifies the appearance style of the component.	`Extract<"outline" \| "outline-fill" \| "solid", Appearance>`	`"solid"`
closable	closable	When `true`, displays a close button in the component.	`boolean`	`false`
closed	closed	When `true`, hides the component.	`boolean`	`false`
closeOnDelete	close-on-delete	When `true`, the component closes when the Delete or Backspace key is pressed while focused.	`boolean`	`false`
disabled	disabled	When `true`, interaction is prevented and the component is displayed with lower opacity.	`boolean`	`false`
icon	icon	Specifies an icon to display.	`IconName`
iconFlipRtl	icon-flip-rtl	When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).	`boolean`	`false`
kind	kind	Specifies the kind of the component, which will apply to border and background if applicable.	`Extract<"brand" \| "inverse" \| "neutral", Kind>`	`"neutral"`
labelrequired	label	Specifies an accessible label for the component.	`string`
messageOverrides		Overrides individual strings used by the component.	`Record<string, unknown> \| undefined`
scale	scale	Specifies the size of the component. When contained in a parent `calcite-chip-group`, inherits the parent's `scale` value.	`Scale`	`"m"`
selected	selected	When `true`, the component is selected.	`boolean`	`false`
value	value	The component's value.	`any`

Slots

Name	Description
default (unnamed)	A slot for adding text.
image	A slot for adding an image.

Styles

Name	Description
--calcite-chip-background-color	Specifies the component's background color.
--calcite-chip-border-color	Specifies the component's border color.
--calcite-chip-close-icon-color	Specifies the component's close element icon color.
--calcite-chip-corner-radius	Specifies the component's corner radius.
--calcite-chip-icon-color	Specifies the component's icon color.
--calcite-chip-select-icon-color-press	Specifies the component's selection element icon color when active.
--calcite-chip-select-icon-color-pressed	deprecated in v3.1.0, removal target v6.0.0 - Use `--calcite-chip-select-icon-color-press` instead. Specifies the component's selection element icon color when active.
--calcite-chip-select-icon-color	Specifies the component's selection element icon color.
--calcite-chip-text-color	Specifies the component's text color.

Events

Name	Description	Behavior
calciteChipClose	Fires when the component's close button is selected.	bubblescomposed
calciteChipSelect	Fires when the selected state of the component changes.	bubblescomposed

Methods

Name	Description	Signature
componentOnReady	Creates a promise that resolves once the component is fully loaded.	`componentOnReady(): Promise<this>`
setFocus	Sets focus on the component.	`setFocus(options?: FocusOptions): Promise<void>`