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.

Usage

Any element can be used with a badge.

API

v-badge
Name
bottom
Default
false
Type
boolean

Align the component towards the bottom

Name
color
Default
'primary'
Type
string

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))

Name
left
Default
false
Type
boolean

Align the component towards the left

Name
mode
Default
undefined
Type
string

Sets the transition mode (does not apply to transition-group) vue docs

Name
origin
Default
undefined
Type
string

Sets the transition origin

Name
overlap
Default
false
Type
boolean

Component will overlap the slotted content

Name
transition
Default
'fab-transition'
Type
string

Sets the component transition. Can be one of the built in transitions or your own.

Name
value
Default
true
Type
any

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.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore