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
border
Default
undefined
Type
string

Puts a border on the element. Accepts top | right | bottom | left

Name
close-label
Default
'$vuetify.close'
Type
string

Text used for aria-label on dismissible alerts

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

Swap color from the background to the border for an alternative border look

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
dense
Default
false
Type
boolean

Hides icon for a more simplistic alert

Name
dismissible
Default
false
Type
boolean

Specifies that the Alert can be closed

Name
elevation
Default
undefined
Type
number | string

Designates an elevation between 0 and 24

Name
height
Default
undefined
Type
number | string

Sets the component height

Name
icon
Default
undefined
Type
string

Designates a specific icon

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
max-height
Default
undefined
Type
number | string

Sets the maximum height for the content

Name
max-width
Default
undefined
Type
number | string

Sets the maximum width for the content

Name
min-height
Default
undefined
Type
number | string

Sets the minimum height for the content

Name
min-width
Default
undefined
Type
number | string

Sets the minimum width for the content

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 Deprecated in — v2.0
Default
false
Type
boolean

Alert will have an outline

Name
outlined
Default
false
Type
boolean

Alert will have an outline

Name
prominent
Default
false
Type
boolean

Displays a larger vertically centered icon to draw more attention

Name
tag
Default
'div'
Type
string

Specifies a tag

Name
text
Default
false
Type
boolean

Components.Alerts.

Name
tile
Default
false
Type
boolean

Removes the component's border-radius

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
true
Type
boolean

Controls visibility

Name
width
Default
undefined
Type
number | string

The width of the content

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