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


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





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 alerts inherit their borders from the current color applied.

Edit this page | language on Github