Chips
The v-chip component is used to convey small pieces of information. Using the close property, the chip becomes interactive, allowing user interaction. This component is used by the v-chip-group for advanced selection options.
Color
Use color prop to change the background color of chips.
Elevated
Use elevated variant option to create filled chips.
Outlined
Use outlined variant option to create outline border chips.
Label
Label chips use the v-card border-radius. Use label prop to create label chips.
Closable
Closable chips can be controlled with a v-model.
With Icon
Chips can use text or any icon available in the Material Icons font library.
With Icon
Use pill prop to remove the v-avatar padding.
Size
The v-chip component can have various sizes from x-small to x-large.
In Selects
Selects can use chips to display the selected data. Try adding your own tags below.
In Selects
Chips can be combined with v-menu to enable a specific set of actions for a chip.
CONTENTS
Introduction
Color
Elevated
Outlined
Label
Closable
With Icon
With Avatar
Sizes
In Selects
Expandable