Badge (insignia)

El componente v-badge puede envolver cualquier tipo de contenido para resaltar información al usuario o sólo para llamar su atención a un elemento específico.

Uso

Any element can be used with a badge.

API

v-badge
Nombre
bottom
Default
false
Type
boolean

Alínea el componente hacia abajo

Nombre
color
Default
'primary'
Type
string

Aplica el color especificado al control.

Nombre
left
Default
false
Type
boolean

Alínea el componente hacia la izquierda

Nombre
mode
Default
undefined
Type
string

Configura el modo de transición (no aplica a los transition-group)

Nombre
origin
Default
undefined
Type
string

Configura el origen de la transición

Nombre
overlap
Default
false
Type
boolean

El componente se traslapará al contenido slotted

Nombre
transition
Default
'fab-transition'
Type
string

Configura la transición del componente. Puede ser una de las transiciones prefabricadas o una propia.

Nombre
value
Default
true
Type
any

Controla la visibilidad

Ejemplos

Traslape

La insignia traslapará su contenido cuando se utilice la prop overlap

En línea

Las insignias pueden ser colocadas en línea con el texto.

Ícono

La insignia puede utilizar cualquiera de los íconos soportados actualmente.

Visibilidad

La visibilidad de las insignias puede ser controlada usando 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