Chip

The Chip component is used to convey small pieces of information. Using the close property, the chip becomes interactive, allowing user interaction.

info

For more details about Vuetify’s usage of Chip component, click Chip page.
For more prop explanations, click Vuetify Chip API page.

Props

Attribute	Description	Type	Default
activeClass	Configure the active CSS class applied when the link is active.	string	undefined
active	Determines whether the chip is visible or not.	boolean	true
append	Setting append prop always appends the relative path to the current path.	boolean	false
class	Allows custom properties to take effect.	string	undefined
close	Adds remove button.	boolean	false
closeIcon	Change the default icon used for close chips.	string	undefined
draggable	Makes the chip draggable.	boolean	false
exact	Exactly match the link. Without this, ‘/’ will match every route.	boolean	false
filter	Displays a selection icon when selected.	boolean	false
filterIcon	Change the default icon used for filter chips.	string	undefined
href	Designates the component as anchor and applies the href attribute.	string	undefined
label	Removes circle edges.	boolean	false
large	Makes the component large.	boolean	false
link	Explicitly define the chip as a link.	boolean	false
pill	Remove Avatar padding.	boolean	false
replace	Setting replace prop will call router.replace() instead of router.push() when clicked, so the navigation will not leave a history record.	boolean	false
ripple	Applies the ripple directive.	string	undefined
small	Makes the component small.	boolean	false
tabindex	Allows component to give and receive focus.	number	undefined
tag	Specify a custom tag used on the root element.	string	span
to	Denotes the target route of the link.	string	undefined
textColor	Applies a specified color to the control text.	string	undefined
xSmall	Makes the component extra small.	boolean	false
xLarge	Makes the component extra large.	boolean	false
visible	Visibility of Chip component.	boolean	true

Events

Attribute	Description
click	Emitted when component is clicked
click:close	Emitted when close icon is clicked
input	The updated bound model
update:active	Emitted when close icon is clicked, sets active to false