Skip to content

chip.md

Latest commit

 

History

History
123 lines (95 loc) · 3.43 KB

chip.md

File metadata and controls

123 lines (95 loc) · 3.43 KB
title Chip
description A Chip is a compact UI element that provides brief, descriptive information about an element. It is terse, ideally one word.
status ready
thumb true
image assets/images/components/chip.png
storybook https://dialtone.dialpad.com/vue/?path=/story/components-chip--default
figma_url https://www.figma.com/design/W58r5BkO8qTw3vem9YieJd/DT9-Component-Library--Rebrand-2025-?node-id=9937-64802
keywords
tag
pill
token
badge
d-chip
DtChip
dt-chip
filter chip
choice chip

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.

<dt-chip :interactive="false">Chip</dt-chip>

Default

<dt-chip>Chip</dt-chip>

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.

<dt-chip disabled>Chip</dt-chip>

Without Close Button

<dt-chip :show-close="false">Chip</dt-chip>

With Icon

<dt-chip :show-close="false">
  <template #icon>
    <dt-icon
      name="phone"
      size="200"
    />
  </template>
  <template #default>
    Chip
  </template>
</dt-chip>

With Icon and Close Button

<dt-chip>
  <template #icon>
    <dt-icon
      name="phone"
      size="200"
    />
  </template>
  <template #default>
    Chip
  </template>
</dt-chip>

With Avatar and Close Button

<dt-chip>
  <template #avatar>
    <dt-avatar
      image-src="/assets/images/person.png"
      image-alt="Jaqueline Nackos"
      full-name="Jaqueline Nackos"
    />
  </template>
  <template #default>
    Chip
  </template>
</dt-chip>

Truncated

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

<dt-chip content-class="d-w-150">
  <span class="d-chip__text d-truncate">Chip loooooong name</span>
</dt-chip>

Sizes

<!-- @wrapper -->
<dt-stack direction="row" gap="100">
  <dt-chip :interactive="false" :size="100">Chip</dt-chip>
  <dt-chip :interactive="false" :size="200">Chip</dt-chip>
  <dt-chip :interactive="false">Chip</dt-chip>
</dt-stack>

Vue API

Classes