Chip

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

Default

Helps you represent simple data with colorful options.

Basic Chip
LD
Avatar Text
person
Avatar Icon
Avatar Image
Closable chip

Color

Change the background color of the chip.

Basic Chip
LD
Avatar Text
person
Avatar Icon
Avatar Image
Closable chip
Closable chip

Transparent

You can create chip which have transparent background using transparent prop.

Basic Chip
LD
Avatar Text
person
Avatar Icon
Avatar Image
Closable chip
Closable 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.

person
Icon Default
send
Icon send
markunread
Icon markunread
link_off
Icon link_off
battery_alert
Icon battery_alert
edit
Icon edit

Closable

For making a chip closable.

Dribbble
GitHub
Behance
Vuejs
Vuesax

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.

[ "Vuejs", "Node", "Vuesax" ]
Vuejs
Node
Vuesax
close

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.

[ "Vuejs", "Node", "Vuesax" ]
Vuejs
Node
Vuesax
delete_forever

API #

Name Type Parameters Description default
color String RGB, HEX, primary, success, danger, warning, dark Component color primary
transparent Boolean true/false Create chip with transparent background false
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