Badge
The v-badge component can wrap any type of content to highlight information to a user or to just draw attention to a specific element.
API
Align the component towards the bottom
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Align the component towards the left
Sets the transition mode (does not apply to transition-group) vue docs
Sets the transition origin
Component will overlap the slotted content
Sets the component transition. Can be one of the built in transitions or your own.
Controls visibility
Examples
Overlap
The badge will overlap its content when using the overlap prop
Inline
Badges can also be placed inline with text.
Icon
The badge can use all of the currently supported icon sets.
Visibility
The visibility of badges can be controlled using v-model.