Explore the API reference for the Vue Chip component and discover how to effectively utilize its props for customization.
On this page
CChip
jsx
import { CChip } from '@coreui/vue-pro'
Props
Property
Default
Type
active
-
boolean
Toggle the active state for the component.
ariaRemoveLabel
'Remove'
string
Provides an accessible label for the remove button.
as
'span'
string
Component used for the root node. Either a string to use a HTML element or a component.
clickable
-
boolean
Enables interactive hover styling and pointer cursor.
color
-
Color
Sets the color context of the component to one of CoreUI's themed colors.
disabled
undefined
boolean
Toggle the disabled state for the component. Defaults to undefined so a chip can override the value inherited from a CChipSet (including turning it off).
filter
undefined
boolean
Turns the component into a filter chip. A filter chip is selectable and shows a leading check icon while selected. Defaults to undefined so a chip can override the value inherited from a CChipSet.
removable
undefined
boolean
Displays a remove button inside the component. Defaults to undefined so a chip can override the value inherited from a CChipSet (including turning it off).
removeIcon
undefined
string, object
Replaces the default remove icon with a custom icon node.
selectable
undefined
boolean
Enables selectable behavior and keyboard toggle support. Defaults to undefined so a chip can override the value inherited from a CChipSet.
selected
undefined
boolean
Controls the selected state of a selectable component.
selectedIcon
undefined
string, object
Replaces the default selected icon shown by a filter chip with a custom icon node.
size
-
string
Size the component small or large.
value
undefined
string
Sets the value associated with the component, used by CChipSet to track selection.
variant
-
string
Set the button variant to an outlined style.
Events
Event name
click
Event called when the user clicks on the component.
deselect
Event called when the component becomes deselected.