You can add a notification label to the avatar, either a reference point or a number with the property badge
You could also change the badge's color by using the property badge-color
. You are able to use the Main Colors or RGB and HEX colors.
Only RGB and HEX colors are supported.
Increment Badge counter
<template>
<vs-avatar badge />
<vs-avatar :badge="badge1" text="Luisdaniel" />
<vs-avatar badge-color="rgb(140, 23, 164)" :badge="badge2" text="Luisd" />
<vs-button color="primary" type="filled" @click="increment"> Increment Badge counter </vs-button>
</template>
<script>
export default {
data: () => ({
badge1: 2,
badge2: 10,
}),
methods: {
increment() {
this.badge1++
this.badge2++
}
}
}
</script>