Chip

The v-chip component is used to convey small pieces of information. Using the close property, the chip becomes interactive, allowing user interaction.

Usage

Chips come in 4 primary variations. Regular, with icon, with portrait and closeable.

API

v-chip
Name
close
Default
false
Type
boolean

Adds remove button

Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disabled
Default
false
Type
boolean

Disables the chip, making it un-selectable

Name
label
Default
false
Type
boolean

Removes circle edges

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
outline
Default
false
Type
boolean

Removes background and applies border and text color

Name
selected
Default
false
Type
boolean

Applies a selection color to the chip. Primarily used for displaying highlight context in v-select

Name
small
Default
false
Type
boolean

Decreases the chip size

Name
text-color
Default
undefined
Type
string

Applies a specified color to the control text

Name
value
Default
true
Type
boolean

Controls visibility

Examples

Colored

Any color from the Material Design palette can be used to change a chips color.

Icon

Chips can use text or any icon available in the Material Icons font library.

Outline

Outlined chips inherit their border color from the current text color.

Label

Label chips use the v-card border-radius.

Closable

Closable chips can be controlled with a v-model. Listen to the input event if you want to know when a chip has been closed.

In selects

Selects can use chips to display the selected data. Try adding your own tags below.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore