Chip

Calcite Chips are simple contextual helpers that are commonly used in filtering and as categorical identifiers.

Overview

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

Chips can be grey, blue, red, yellow, or green and can contain icons, Avatars, or images as visual cues. Additionally, Chips can be dismissible or static elements.

Usage

  • Filtering cues
  • Qualifying badges
  • Simple content support

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Accessibility

Keyboard navigation

KeyFunction
TabMove focus in and out of dismiss button (if component has dismissible property)
Tab and ShiftMove focus in and out of dismiss button (if component has dismissible property)
EnterDismiss chip
SpaceDismiss chip

API reference

calcite-chip
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
appearanceappearance

specify the appearance style of the button, defaults to solid.

typedChoose from a set of typed values
clearsolid (default)
colorcolor

specify the color of the button, defaults to blue

typedChoose from a set of typed values
bluegreengrey (default)redyellow
dismissLabeldismiss-label

Aria label for the "x" button

optional
stringA custom string
"Close" (default)
dismissibledismissible

Optionally show a button the user can click to dismiss the chip

booleanA boolean property should be present, or not
truefalse
iconicon

optionally pass an icon to display - accepts Calcite UI icon names

optional
iconAccepts a Calcite UI Icon string
iconFlipRtlicon-flip-rtl

flip the icon in rtl

booleanA boolean property should be present, or not
truefalse
scalescale

specify the scale of the chip, defaults to m

typedChoose from a set of typed values
lm (default)s
valuevalue

The assigned value for the chip

required
typedChoose from a set of typed values
any

Events

NameDescriptionDetail
calciteChipDismiss

Emitted when the dismiss button is clicked

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding text.

image

A slot for adding an image.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.