Skip to main content

​
Chip

The VChip component is used to convey small pieces of information. Using the closable prop, chips can be interactive and used as filters or selections.

​
Usage

<template>
  <v-chip>Default Chip</v-chip>
</template>

​
Props

​
text
string | number | boolean
Text content displayed in the chip
​
label
boolean
default:"false"
Removes the chip’s border radius
​
pill
boolean
default:"false"
Applies pill styling (maximum border radius)
​
closable
boolean
default:"false"
Adds a close icon which emits the click:close event when clicked
​
closeIcon
IconValue
default:"$delete"
Icon to use for the close button
​
closeLabel
string
default:"$vuetify.close"
Accessibility label for the close button
​
filter
boolean
default:"false"
Shows a check icon when selected (requires chip group)
​
filterIcon
IconValue
default:"$complete"
Icon to display when filter is active
​
prependAvatar
string
Avatar image URL displayed before the text
​
prependIcon
IconValue
Icon displayed before the text
​
appendAvatar
string
Avatar image URL displayed after the text
​
appendIcon
IconValue
Icon displayed after the text
​
draggable
boolean
default:"false"
Makes the chip draggable
​
link
boolean
Makes the chip a link (automatically detected when using to or href)
​
to
string | object
Vue Router location for the chip link
​
href
string
Standard anchor href attribute
​
ripple
boolean | object
default:"true"
Applies the ripple directive when clickable
​
modelValue
boolean
default:"true"
Controls the visibility of the chip
​
disabled
boolean
default:"false"
Removes the chip’s interactivity
​
activeClass
string
CSS class applied when the chip is active
​
color
string
Applies specified color to the chip
​
baseColor
string
Base color applied when chip is not selected
​
density
string
Adjusts the vertical height. Options: default, comfortable, compact
​
elevation
string | number
Elevation level (0-24)
​
size
string | number
Sets the height and width. Options: x-small, small, default, large, x-large
​
rounded
string | number | boolean
Border radius of the chip
​
tag
string
default:"span"
Specify a custom HTML tag to use on the root element
​
variant
string
default:"tonal"
Applies a distinct style. Options: flat, text, elevated, tonal, outlined, plain

​
Events

​
click
(e: MouseEvent | KeyboardEvent) => void
Emitted when the chip is clicked
​
click:close
(e: MouseEvent) => void
Emitted when the close button is clicked
​
update:modelValue
(value: boolean) => void
Emitted when the chip visibility changes
​
group:selected
(val: { value: boolean }) => void
Emitted when the chip selection state changes in a group

​
Slots

​
default
The default slot for chip content. Receives selection state props when in a group
​
prepend
Slot for content before the text
​
append
Slot for content after the text
​
close
Slot for custom close button content
​
filter
Slot for custom filter icon

​
Examples

​
Basic Chips

<template>
  <div class="d-flex gap-2">
    <v-chip>Default</v-chip>
    <v-chip color="primary">Primary</v-chip>
    <v-chip color="secondary">Secondary</v-chip>
    <v-chip color="success">Success</v-chip>
  </div>
</template>

​
Closable Chips

<template>
  <div class="d-flex gap-2">
    <v-chip 
      v-for="tag in tags"
      :key="tag"
      closable
      @click:close="removeTag(tag)"
    >
      {{ tag }}
    </v-chip>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tags = ref(['Vue', 'Vuetify', 'JavaScript'])

function removeTag(tag) {
  tags.value = tags.value.filter(t => t !== tag)
}
</script>

​
Chips with Icons

<template>
  <div class="d-flex gap-2">
    <v-chip prepend-icon="mdi-account" color="primary">
      User
    </v-chip>
    <v-chip prepend-icon="mdi-email" color="secondary">
      Email
    </v-chip>
    <v-chip append-icon="mdi-chevron-right" color="success">
      Next
    </v-chip>
  </div>
</template>

​
Chips with Avatars

<template>
  <div class="d-flex gap-2">
    <v-chip prepend-avatar="/user1.jpg">
      John Doe
    </v-chip>
    <v-chip prepend-avatar="/user2.jpg">
      Jane Smith
    </v-chip>
  </div>
</template>

​
Chip Variants

<template>
  <div class="d-flex flex-wrap gap-2">
    <v-chip variant="elevated" color="primary">Elevated</v-chip>
    <v-chip variant="flat" color="primary">Flat</v-chip>
    <v-chip variant="tonal" color="primary">Tonal</v-chip>
    <v-chip variant="outlined" color="primary">Outlined</v-chip>
    <v-chip variant="text" color="primary">Text</v-chip>
  </div>
</template>

​
Chip Shapes

<template>
  <div class="d-flex gap-2">
    <v-chip>Default</v-chip>
    <v-chip label>Label</v-chip>
    <v-chip pill>Pill</v-chip>
  </div>
</template>

​
Clickable Chips

<template>
  <div class="d-flex gap-2">
    <v-chip 
      color="primary"
      @click="handleClick"
    >
      Click Me
    </v-chip>
    <v-chip 
      color="secondary"
      to="/profile"
    >
      Profile Link
    </v-chip>
  </div>
</template>

<script setup>
function handleClick() {
  console.log('Chip clicked')
}
</script>

​
Chip Sizes

<template>
  <div class="d-flex align-center gap-2">
    <v-chip size="x-small">X-Small</v-chip>
    <v-chip size="small">Small</v-chip>
    <v-chip>Default</v-chip>
    <v-chip size="large">Large</v-chip>
    <v-chip size="x-large">X-Large</v-chip>
  </div>
</template>

Build docs developers (and LLMs) love

Get started for freeTalk to us