<dt-chip>Chip</dt-chip>
<dt-chip :size="100">Chip</dt-chip> <dt-chip :size="200">Chip</dt-chip> <dt-chip :size="300">Chip</dt-chip>
Add :interactive="true" to make it an interactive Chip. This changes it from a non-interactive, read-only Chip to an interactive Chip with events and hover/active state. Note that this does not affect the interactivity of its × remove button.
<dt-chip :interactive="true">Chip</dt-chip>
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.
<dt-chip disabled>Chip</dt-chip>
<dt-chip :show-close="false">Chip</dt-chip>
<dt-chip :show-close="false"> <template #icon> <dt-icon name="phone" size="200" /> </template> Chip </dt-chip>
<dt-chip> <template #icon> <dt-icon name="phone" size="200" /> </template> Chip </dt-chip>
<dt-chip> <template #avatar> <dt-avatar size="200" image-src="/assets/images/person.png" image-alt="Jaqueline Nackos" full-name="Jaqueline Nackos" /> </template> Chip </dt-chip> <dt-chip> <template #avatar> <dt-avatar size="200" full-name="Jaqueline Nackos" /> </template> Chip </dt-chip>
To truncate text, use DtText's truncate prop, and set the width of the Chip's content with a content-class prop.
<dt-chip content-class="d-w-150"> <dt-text truncate>Chip loooooong name here</dt-text> </dt-chip>
import { DtChip } from '@dialpad/dialtone-vue';
Name
|
Type
|
|---|---|
avatar | slot for Chip avatar |
default | slot for Content within chip |
icon | slot for Chip icon |
Name
|
Default
|
Type
|
|---|---|---|
ariaLabel | '' | string Descriptive label for the chip content.
If this prop is unset the content in the default slot will be used as an aria-label. |
avatarClass | '' | string|array|object Additional class name for the avatar wrapper element. |
contentClass | '' | string|array|object Additional class name for the chip element. |
disabled | false |
"true"
|
"false"
Whether the chip is disabled |
iconClass | '' | string|array|object Additional class name for the icon wrapper element. |
id | generated unique ID | string Id to use for the dialog's aria-labelledby. |
interactive | false |
"true"
|
"false"
The interactivity of the chip.
Makes chip clickable, apply hover/focus/active style, emit keyboard events etc. |
labelClass | '' | string|array|object Additional class name for the span element. |
showClose | true |
"true"
|
"false"
Shows the close button on the chip |
size | 300 |
"100"
|
"200"
|
"300"
The size of the chip. |
Name
|
Type
|
|---|---|
click | PointerEvent | KeyboardEvent Native chip click event |
close | Close button click event |
keydown | KeyboardEvent Native chip key down event |
keyup | KeyboardEvent Native chip key up event |
Class
|
Applies to
|
Description
|
|---|
Chip documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope