VChip API

Props

name	type	default
`active-class`	string	undefined
The class applied to the component when it matches the current route. Find more information about the active-class prop on the vue-router documentation.
`append-avatar`	string	undefined
Appends a v-avatar component after default content in the append slot.
`append-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Creates a v-icon component after default content in the append slot.
`base-color` New in v3.8.0	string	undefined
Sets the color of component when not focused.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`closable`	boolean	false
Adds remove button and then a chip can be closed.
`close-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$delete'
Change the default icon used for close chips.
`close-label`	string	'$vuetify.close'
Text used for aria-label on the close button in close chips. Can also be customized globally in Internationalization.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Removes the ability to click or target the component.
`draggable`	boolean	false
Makes the chip draggable.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`exact`	boolean	false
Exactly match the link. Without this, ‘/’ will match every route. You can find more information about the exact prop on the vue-router documentation.
`filter`	boolean	false
Displays a selection icon when selected.
`filter-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	'$complete'
Change the default icon used for filter chips.
`href`	string	undefined
Designates the component as anchor and applies the href attribute.
`label`	boolean	false
Applies a medium size border radius.
`link`	boolean	undefined
Designates that the component is a link. This is automatic when using the href or to prop.
`model-value`	boolean	true
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`pill`	boolean	false
Remove `v-avatar` padding.
`prepend-avatar`	string	undefined
Prepends a v-avatar component in the prepend slot before default content.
`prepend-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Creates a v-icon component in the prepend slot before default content.
`replace`	boolean	false
Setting replace prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation.
`ripple`	boolean \| { class: string; keys: string[] }	true
Applies the v-ripple directive.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`selected-class`	string	undefined
Configure the active CSS class applied when an item is selected.
`size`	string \| number	'default'
Sets the height, padding and the font size of the component. Accepts only predefined options: x-small, small, default, large, and x-large.
`tag`	string \| (new () => any) \| FunctionalComponent	'span'
Specify a custom tag used on the root element.
`text`	string \| number \| boolean	undefined
Specify content text for the component.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`to`	string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric	undefined
Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.
`value`	any	undefined
The value used when a child of a v-chip-group.
`variant`	'text' \| 'flat' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'tonal'
Applies a distinct style to the component.

Events

name	type
`click`	[MouseEvent \| KeyboardEvent]
Emitted when component is clicked, toggles chip if contained in a chip group - Will trigger component to ripple when clicked unless the `.native` modifier is used.
`click:close`	[MouseEvent]
Emitted when close icon is clicked.
`group:selected`	[{ value: boolean }]
Event that is emitted when an item is selected within a group.
`update:modelValue`	[boolean]
Event that is emitted when the component’s model changes.

Slots

never

never

{
  isSelected: boolean
  selectedClass: boolean | string[]
  select: (value: boolean) => void
  toggle: () => void
  value: unknown
  disabled: boolean
}

never

never

never

`append`
Adds an item inside the input and after input content.
`close`
Slot for icon used in close prop.
`default`
The default Vue slot.
`filter`
Slot for icon used in filter prop.
`label`
The default slot of the v-label or v-field-label component.
`prepend`
Adds an item outside the input and before input content.

SASS Variables

name	default
`$chip-background`	rgb(var(--v-theme-surface-variant))
`$chip-border`	( $chip-border-color, $chip-border-style, $chip-border-width )
`$chip-border-color`	settings.$border-color-root
`$chip-border-radius`	map.get(settings.$rounded, "pill")
`$chip-border-style`	settings.$border-style-root
`$chip-border-thin-width`	thin
`$chip-border-width`	0
`$chip-close-size`	18px
`$chip-color`	rgb(var(--v-theme-on-surface-variant))
`$chip-density`	("default": 0, "comfortable": -1, "compact": -2)
`$chip-disabled-opacity`	0.3
`$chip-elevation`	1
`$chip-filter-transition`	.15s settings.$standard-easing
`$chip-font-size`	tools.map-deep-get(settings.$typography, "label-large", "size")
`$chip-font-weight`	400
`$chip-height`	32px
`$chip-icon-size-multiplier`	calc(18/21)
`$chip-label-border-radius`	settings.$border-radius-root
`$chip-max-width`	100%
`$chip-overflow`	hidden
`$chip-padding-ratio`	2 + math.div(2, 3)
`$chip-plain-opacity`	.62
`$chip-sizes`	( "height": $chip-height, "font-size": $chip-font-size, )
`$chip-variants`	( $chip-background, $chip-color, $chip-elevation, $chip-plain-opacity, 'v-chip' )
`$chip-white-space`	nowrap

#VChip API

VChip API