Alert

The v-alert component is used to convey important information to the user. It comes in 4 variations, success, info, warning and error. These have default icons assigned which can be changed and represent different actions

Uso

Alerts can have a contextual color and are hidden by default.

API

v-alert
Nombre
color
Default
undefined
Type
string

Aplica el color especificado al control.

Nombre
dismissible
Default
false
Type
boolean

Components.Alerts.

Nombre
icon
Default
undefined
Type
string

Components.Alerts.

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
outline
Default
false
Type
boolean

Components.Alerts.

Nombre
transition
Default
undefined
Type
string

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

Nombre
type
Default
undefined
Type
string

Components.Alerts.

Nombre
value
Default
undefined
Type
any

Controla la visibilidad

Ejemplos

Closable

Using v-model, you can control the state of the Alert. If you don't want to assign a v-model and just display the alert, you can simply assign the prop value.

Custom Icon / No Icon

You can easily assign a custom icon or remove it altogether.

Display transition

You can apply a custom transition to the show/hide of the alert.

Outline

Outline alerts inherit their borders from the current color applied.

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