\r\n \r\n You can add a notification label to the avatar, either a reference point or a number with the property badge
\r\n 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.
\r\n\r\n \r\n Only RGB and HEX colors are supported.\r\n \r\n\r\n \r\n\r\n \r\n \r\n \r\n Increment Badge counter \r\n\r\n
\r\n\r\n \r\n<template>\r\n <vs-avatar badge />\r\n <vs-avatar :badge="badge1" text="Luisdaniel" />\r\n <vs-avatar badge-color="rgb(140, 23, 164)" :badge="badge2" text="Luisd" />\r\n <vs-button color="primary" type="filled" @click="increment"> Increment Badge counter </vs-button>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n data: () => ({\r\n badge1: 2,\r\n badge2: 10,\r\n }),\r\n methods: {\r\n increment() {\r\n this.badge1++\r\n this.badge2++\r\n }\r\n }\r\n}\r\n</script>\r\n \r\n\r\n \r\n