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

Usage

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

API

v-alert
Name
color
Default
undefined
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
dismissible
Default
false
Type
boolean

Specifies that the Alert can be closed

Name
icon
Default
undefined
Type
string

Designates a specific icon

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

Alert will have an outline

Name
transition
Default
undefined
Type
string

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

Name
type
Default
undefined
Type
string

Specify a success, info, warning or error alert. Uses the contextual color and a pre-defined icon.

Name
value
Default
undefined
Type
any

Controls visibility

Examples

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