Change the background color of the chip
Only RGB and HEX colors are supported.
Basic Chip
Avatar Text
Avatar Icon
Avatar Image
Closable chip
Closable chip
<template>
<div class="demo-alignment">
<vs-chip color="primary">Basic Chip</vs-chip>
<vs-chip color="success">
<vs-avatar text="LD" />
Avatar Text
</vs-chip>
<vs-chip color="danger">
<vs-avatar />
Avatar Icon
</vs-chip>
<vs-chip color="warning">
<vs-avatar src="https://randomuser.me/api/portraits/men/4.jpg" />
Avatar Image
</vs-chip>
<vs-chip @click="isDeleted=true" v-if="!isDeleted" closable color="dark">
Closable chip
</vs-chip>
<vs-chip @click="isDeleted2=true" v-if="!isDeleted2" closable color="#24c1a0" close-icon="close">
<vs-avatar src="https://randomuser.me/api/portraits/men/16.jpg" />
Closable chip
</vs-chip>
</div>
</template>
<script>
export default {
data() {
return {
isDeleted: false,
isDeleted2: false,
}
}
}
</script>