Chip

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

Color

To represent symple data with colorful options.

primary
warning
danger
success
dark
RGB
HEX

Icon

Add a nice icon to the chip.

TIP

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

info
primary
help
warning
error
danger
check_circle
success
account_circle
dark
alarm
RGB
home
HEX

Closable

To make a chip closable.

primary
close
warning
close
danger
close
success
close
dark
close

Add and Remove Items

You can add and remove chips with the vs-chips component and as a main parameter items an array.

[ "luis", "carols", "summer" ]
luis
close
carols
close
summer
close
close

API #

NameTypeParametersDescriptiondefault
vs-colorStringRGB, HEX, primary, success, danger, warning, darkComponent colorprimary
vs-closableBooleanWith closable buttonfalse
vs-iconStringWith custom icon
placeholderStringPlaceholder text (only in vs-chips)
itemsArraybindthe chips within the component that can be removed and add (only in vs-chips)