packages/docs/src/pages/en/components/chips.md
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.
Chips come in the following variations: closeable, filter, outlined, pill. The default slot of v-chip will also accept avatars and icons alongside text.
| Component | Description |
|---|---|
| v-chip | Primary component |
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.
Similar to other components such as v-btn and v-list, the v-chip component has a large selection of props for customizing the appearance.
Closable chips can be controlled with a v-model. You can also listen to the click:close event if you want to know when a chip has been closed.
Any color from the Material Design palette can be used to change a chips color.
<ExamplesExample file="v-chip/prop-colored" />The variant prop gives you easy access to several different button styles. Available variants are: elevated, flat, tonal (default), outlined, text, and plain.
| Value | Example | Description |
|---|---|---|
| elevated | <v-chip color="primary" variant="elevated">Chip</v-chip> | Elevates the chip with a shadow |
| flat | <v-chip color="primary" variant="flat">Chip</v-chip> | Removes chip shadow |
| tonal | <v-chip color="primary" variant="tonal">Chip</v-chip> | Background color is a lowered opacity of the current text color |
| outlined | <v-chip color="primary" variant="outlined">Chip</v-chip> | Applies a thin border with the current text color |
| text | <v-chip color="primary" variant="text">Chip</v-chip> | Removes the background and removes shadow |
| plain | <v-chip color="primary" variant="plain">Chip</v-chip> | Removes the background and lowers the opacity until hovered |
Chips can have various sizes from x-small to x-large. density is used to adjust the vertical spacing without affecting width or font size.
draggable v-chip component can be dragged by mouse.
Label chips use the v-card border-radius.
v-chip can be rendered without ripple if ripple prop is set to false.
Outlined chips inherit their border color from the current text color.
<ExamplesExample file="v-chip/prop-outlined" />Chips can use text or any icon available in the Material Icons font library.
<ExamplesExample file="v-chip/slot-icon" />The following are a collection of examples that demonstrate more advanced and real world use of the v-chip component.
Chips can be used as actionable items. Provided with a click event, the chip becomes interactive and can invoke methods.
<ExamplesExample file="v-chip/event-action-chips" />In this example we opt to use a customized list instead of v-autocomplete. This allows us to always display the options available while still providing the same functionality of search and selection.
<ExamplesExample file="v-chip/misc-custom-list" />Chips can be combined with v-menu to enable a specific set of actions for a chip.
Chips are great for providing supplementary actions to a particular task. In this instance, we are searching a list of items and collecting a subset of information to display available keywords.
<ExamplesExample file="v-chip/misc-filtering" />Selects can use chips to display the selected data. Try adding your own tags below.
<ExamplesExample file="v-chip/misc-in-selects" />