v-chip component is used to convey small pieces of information. Using the
close property, the chip becomes interactive, allowing user interaction.
Chips come in 4 primary variations. Regular, with icon, with portrait and closeable.
Adds remove button
Applies specified color to the control - it can be the name of material color (for example
purple) or css color (
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
Decreases the chip size
Applies a specified color to the control text
Any color from the Material Design palette can be used to change a chips color.
Chips can use text or any icon available in the Material Icons font library.
Outlined chips inherit their border color from the current text color.
Label chips use the
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.
Selects can use chips to display the selected data. Try adding your own tags below.