Badge

Badge directives can be applied to any element using the v-badge directive. By default, a badge will use the application's defined primary color. Parameters can be passed using the arg, v-badge:arg, modifier, v-badge:2.modifier, or by passing an object by expression, v-badge="{ value: 2, overlap: true }"

The color can be changed by using the color--after helper class, or by apply a class that modifies the background of the badged elements :after psuedo-selector.


Examples

#1 Character
edit
Any character can be placed with a badge.

#2 Icon
edit
The icon badge type only supports Material Design icons.

#3 Inline
edit
Badges can also be placed inline with text.

API

chevron_leftchevron_right