Chip

Storybook Figma

A Chip is a compact UI element that provides brief, descriptive information about an element. It is terse, ideally one word.

Preview

Variants and Examples

Non Interactive

Add :interactive="false" to make it a read-only, non-interactive Chip. This changes it from a <button> to a non-interactive, read-only Chip with no events or hover/active state. Note that this does not effect the interactivity of its × remove button.

Default

Disabled

Use the disabled prop to disable both the Chip and its close button. This sets aria-disabled="true" and tabindex="-1" on the interactive elements and applies disabled styles, preventing pointer and keyboard interaction.

Without Close Button

With Icon

With Icon and Close Button

With Avatar and Close Button

Truncated

To truncate text, add .d-truncate to the content element, and set the width of the .d-chip element.

Sizes

Vue API

Slots

Name	Description
avatar	slot for Chip avatar
default	slot for Content within chip
icon	slot for Chip icon

Props

Name	Description	Default
ariaLabel	Descriptive label for the chip content. If this prop is unset the content in the default slot will be used as an aria-label. Type: string	''
contentClass	Additional class name for the chip element. Type: string\|array\|object	''
disabled	Whether the chip is disabled Type: boolean Values: truefalse	false
hideClose	Hides the close button on the chip Type: boolean Values: truefalse	false
id	Id to use for the dialog's aria-labelledby. Type: string	function () { return getUniqueString(); }
interactive	The interactivity of the chip. Makes chip clickable, apply hover/focus/active style, emit keyboard events etc. Type: boolean Values: truefalse	true
labelClass	Additional class name for the span element. Type: string\|array\|object	''
size	The size of the chip. Type: string Values: xssmmd	'md'

Events

Name	Description
click	Native chip click event Type: PointerEvent \| KeyboardEvent
close	Close button click event
keydown	Native chip key down event Type: KeyboardEvent
keyup	Native chip key up event Type: KeyboardEvent

Classes

Class	Applies to	Description

Preview

Variants and Examples #

Non Interactive #

Default #

Disabled #

Without Close Button #

With Icon #

With Icon and Close Button #

With Avatar and Close Button #

Truncated #

Sizes #

Vue API #

Slots

Props

Events

Classes #

Variants and Examples

Non Interactive

Default

Disabled

Without Close Button

With Icon

With Icon and Close Button

With Avatar and Close Button

Truncated

Sizes

Vue API

Classes