The v-alert component is used to convey important information to the user through the use contextual types icons and color. These default types come in in 4 variations: success, info, warning, and error. Default icons are assigned which help represent different actions each type portrays. Many parts of an alert such as border, icon, and color can also be customized to fit almost any situation.

Text used for aria-label on dismissible alerts. Can also be customizing globally in Internationalization.

name

color

type

string

default

undefined

description

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)). You can find list of built in classes on the colors page.

name

colored-border

type

boolean

default

false

description

Applies the defined color to the alert's border.

name

dark

type

boolean

default

false

description

Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.

name

dense

type

boolean

default

false

description

Hides the alert icon and decreases component's height.

name

dismissible

type

boolean

default

false

description

Adds a close icon that can hide the alert.

name

elevation

type

number | string

default

undefined

description

Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.

name

height

type

number | string

default

undefined

description

Sets the height for the component.

name

icon

type

boolean | string

default

undefined

description

Designates a specific icon.

name

light

type

boolean

default

false

description

Applies the light theme variant to the component.

name

max-height

type

number | string

default

undefined

description

Sets the maximum height for the component.

name

max-width

type

number | string

default

undefined

description

Sets the maximum width for the component.

name

min-height

type

number | string

default

undefined

description

Sets the minimum height for the component.

name

min-width

type

number | string

default

undefined

description

Sets the minimum width for the component.

name

mode

type

string

default

undefined

description

Sets the transition mode (does not apply to transition-group). You can find more information on the Vue documentation for transition modes.

name

origin

type

string

default

undefined

description

Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.

name

outlined

type

boolean

default

false

description

Makes the background transparent and applies a thin border.

name

prominent

type

boolean

default

false

description

Displays a larger vertically centered icon to draw more attention.

name

tag

type

string

default

'div'

description

Specify a custom tag used on the root element.

name

text

type

boolean

default

false

description

Applies the defined color to text and a low opacity background of the same.

The type prop provides 4 default v-alert styles: success, info, warning, and error. Each of these styles provide a default icon and color. The default colors can be configured globally by customizing Vuetify's theme.

The color-border prop removes the alert background in order to accent the border prop. If a type is set, it will use the types default color. If no color or type is set, the color will default to the inverted color of the applied theme (black for light and white/gray for dark).

The dismissible prop adds a close button to the end of the alert component. Clicking this button will set its value to false and effectively hide the alert. You can restore the alert by binding v-model and setting it to true. The close icon automatically has an aria-label applied that can be changed by modifying the close-label prop or changing close value in your locale. For more information on how to global modify your locale settings, navigate to the Internationalization page.

The icon prop allows you to add an icon to the beginning of the alert component. If a type is provided, this will override the default type icon. Additionally setting the icon prop to false will remove the icon altogether.

The prominent prop provides a more pronounced alert by increasing the height and applying a halo to the icon. When applying both prominent and dense together, the alert will take on the appearance of a normal alert but with the prominent icon effects.

The text prop is a simple alert variant that applies a reduced opacity background of the provided color. Similar to other styled props, text can be combined with other props like dense, prominent, and outlined to create a unique and customized component.

The transition prop allows you to apply a transition to the alert which is viewable when the component hides and shows. For more information, you can checkout any of Vuetify's prebuilt transitions or review how to create your own.

By default, v-alert components are assigned the WAI-ARIA role of alert which denotes that the alert "is a live region with important and usually time-sensitive, information." When using the dismissible prop the close icon will recieve a corresponding aria-label. This value can be modified by changing either the close-label prop or globally through customizing the Internationalization's default value for the close property.