Chip Component

The DsChip component is a flexible chip component that wraps Vuetify's v-chip for displaying compact elements like tags, filters, and status indicators.

Overview

DsChip provides a comprehensive chip solution with multiple variants, sizes, and customization options. It supports Material Design 3 styling, closable chips, icon support, and full accessibility features.

Interactive Demo

Chip Playground

Customize the chip using the controls below to see different variants, colors, sizes, and features.

Chip Label

Controls

Variant

tonal

Variant

Chip style variant

Color

primary

Color

Color from design tokens

Size

default

Size

Chip size

Closable

Show close icon

Pill

Pill-shaped border radius

Label

Square corners (overrides pill)

Prepend Icon

Prepend Icon

Icon before text

Append Icon

Append Icon

Icon after text

Disabled

Disable chip interaction

Chip Text

Chip Text

Text to display on chip

Code

<template>
  <DsChip>
    Chip Label
  </DsChip>
</template>

Variants

Elevated

Flat

Tonal

Outlined

Text

<template>
  <div class="chip-group">
    <DsChip variant="elevated">Elevated</DsChip>
    <DsChip variant="flat">Flat</DsChip>
    <DsChip variant="tonal">Tonal</DsChip>
    <DsChip variant="outlined">Outlined</DsChip>
    <DsChip variant="text">Text</DsChip>
  </div>
</template>

Sizes

X-Small

Small

Default

Large

X-Large

<template>
  <div class="chip-group">
    <DsChip size="x-small">X-Small</DsChip>
    <DsChip size="small">Small</DsChip>
    <DsChip size="default">Default</DsChip>
    <DsChip size="large">Large</DsChip>
    <DsChip size="x-large">X-Large</DsChip>
  </div>
</template>

With Icons

User

Dropdown

Favorite

<template>
  <div class="chip-group">
    <DsChip prepend-icon="mdi-account">User</DsChip>
    <DsChip append-icon="mdi-chevron-down">Dropdown</DsChip>
    <DsChip prepend-icon="mdi-star" append-icon="mdi-close">Favorite</DsChip>
  </div>
</template>

Closable

Closable Chip

Remove Tag

Delete Filter

<template>
  <div class="chip-group">
    <DsChip closable>Closable Chip</DsChip>
    <DsChip closable color="secondary">Remove Tag</DsChip>
    <DsChip closable variant="outlined" color="error">Delete Filter</DsChip>
  </div>
</template>

Shapes

Pill Shape (Default)

Rounded

Label (Square)

<template>
  <div class="chip-group">
    <DsChip :pill="true">Pill Shape (Default)</DsChip>
    <DsChip :pill="false">Rounded</DsChip>
    <DsChip :label="true">Label (Square)</DsChip>
  </div>
</template>

Colors

Primary

Secondary

Success

Warning

Error

Info

<template>
  <div class="chip-group">
    <DsChip color="primary">Primary</DsChip>
    <DsChip color="secondary">Secondary</DsChip>
    <DsChip color="success">Success</DsChip>
    <DsChip color="warning">Warning</DsChip>
    <DsChip color="error">Error</DsChip>
    <DsChip color="info">Info</DsChip>
  </div>
</template>

Disabled State

Disabled Chip

Disabled Outlined

Disabled Closable

<template>
  <div class="chip-group">
    <DsChip disabled>Disabled Chip</DsChip>
    <DsChip disabled variant="outlined">Disabled Outlined</DsChip>
    <DsChip disabled closable>Disabled Closable</DsChip>
  </div>
</template>

Props

Prop	Type	Default	Description
variant	'elevated' | 'flat' | 'tonal' | 'outlined' | 'text'	'tonal'	Chip style variant
color	string	'primary'	Color from design tokens (primary, secondary, error, warning, success, info)
size	'x-small' | 'small' | 'default' | 'large' | 'x-large'	'default'	Chip size
closable	boolean	false	Show close icon that emits click:close event when clicked
pill	boolean	true	Apply pill-shaped border radius (fully rounded ends)
label	boolean	false	Apply square corners instead of rounded (overrides pill)
prependIcon	string	undefined	Material Design Icon to display before text (e.g., 'mdi-account')
appendIcon	string	undefined	Material Design Icon to display after text (e.g., 'mdi-close')
disabled	boolean	false	Disable chip interaction and apply disabled styling

Events

Event	Payload	Description
click:close	MouseEvent	Emitted when the close icon is clicked (only when closable is true)

Slots

Slot	Description
default	Main chip content/label text

Guidelines

Do

• Use chips to represent filters, tags, or categorization in a compact format
• Keep chip labels short and scannable (1-3 words maximum)
• Use closable chips for dismissible items like selected filters or active tags
• Use tonal variant for low-emphasis chips in dense layouts
• Group related chips together with consistent spacing (12px gap recommended)
• Use prepend icons to add visual context (e.g., user icon for contacts, star for favorites)

Don't

• Don't use chips as primary action buttons - use DsButton instead
• Don't use long text labels that wrap or truncate awkwardly
• Don't mix different variants within the same chip group for visual consistency
• Don't use closable chips for permanent, non-dismissible information
• Don't use chips for critical information that must be immediately visible
• Don't stack multiple icons (prepend + append + close) which creates visual clutter

Accessibility

ARIA & Semantics

• ✅ Uses semantic button element for interactive chips
• ✅ Close button includes proper ARIA label "Close" for screen readers
• ✅ Disabled chips have aria-disabled="true" attribute
• ✅ Screen readers announce chip role and content correctly

Keyboard Navigation

• Tab: Focus the chip or close button
• Enter/Space: Activate chip click or close action
• Escape: Not applicable (chips don't open menus/dialogs)

WCAG Compliance

This component meets WCAG 2.1 AAA standards:

• Keyboard Accessible: Full keyboard navigation support for all interactive elements
• Screen Reader Support: Proper semantic markup and ARIA labels for close button
• Focus Management: Clear focus indicators on chip and close button
• Color Contrast: All color variants and states meet AAA contrast requirements (7:1 for normal text)

Related Components

• Button - For primary actions and commands
• Divider - For separating chip groups or sections