Chip
The v-chip component is used to convey small pieces of information. Using the close property, the chip becomes interactive, allowing user interaction.
API
Adds remove button
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))
Applies the dark theme variant
Disables the chip, making it un-selectable
Removes circle edges
Applies the light theme variant
Removes background and applies border and text color
Applies a selection color to the chip. Primarily used for displaying highlight context in v-select
Decreases the chip size
Applies a specified color to the control text
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.