Chips are compact elements that represent an input, attribute, or action.

Default

Helps you represent simple data with colorful options.

Color

Change the background color of the chip.

Icon

Add a nice icon to the chip.

TIP Vuesax uses the > Google Material Icons font library. For a list of all available icons, visit the official > Material Icons page .

Closable

For making a chip closable.

Add and Remove Items

You can add and remove chips with the vs-chips component. For the main parameter, pass the items property, which is an array representing each chip.

Customize Close and Clear Chips Icons

You can change the icons used for the close button and the clear button when using multiple chips with the vs-chips component. For the main parameter, pass the close-icon property, which is the close icon that appears on each chip. You can change the Clear Chips button with the remove-icon property.

TIP Vuesax uses the > Google Material Icons font library. For a list of all available icons, visit the official > Material Icons page . FontAwesome and other fonts library are supported. Simply use the > icon-pack with > fa or > fas. You still need to include the Font Awesome icons in your project.

API

Name Type Parameters Description default
color String RGB, HEX, primary, success, danger, warning, dark Component color primary
closable Boolean With closable button false
icon String With custom icon
icon-pack String Icon Pack Class Name Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. material-icons
close-icon String provides an icon for the button to close chip. clear
placeholder String Placeholder text (only in vs-chips)
remove-icon String provides an icon for the button to remove chips (only in vs-chips) close