Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Simple Alert

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual prop (e.g., color="primary").

I'm an alert with primary background color.

I'm an alert with secondary background color.

I'm an alert with success background color.

I'm an alert with error background color.

I'm an alert with warning background color.

I'm an alert with info background color.

Icons

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.

I'm an alert with icon.

Border

The border prop adds a simple border to one of the 4 sides of the alert. This can be combined with props like color, type and icon to provide unique accents to the alert. icon altogether.

I'm an alert with top border.

I'm an alert with right border.

I'm an alert with bottom border.

I'm an alert with left border.

Colored Border

The colored-border prop removes the alert background in order to accent the border prop. If a type is set, it will use the type's 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).

I'm an alert with top primary color border.

I'm an alert with right secondary color border.

I'm an alert with bottom success color border.

I'm an alert with left error color border.

Density

The density prop decreases the height of the alert based upon 1 of 3 levels of density. default, comfortable, and compact.

I'm a compact alert with a color of primary.

I'm a comfortable alert with the variant prop and a color of secondary.

I'm a default alert with the color of success.

Type

The type prop provides 4 default v-alert styles: success, info, warning, and error. Each of these styles provide a default icon and color.

I'm a alert with a type of info

I'm a alert with a type of success

I'm a alert with a type of warning

I'm a alert with a type of error

Closable

The closable 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.

Nice, you triggered this alert message!

v-model support

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.

Nice, you triggered this alert message!

Outlined

The variant="outlined" prop inverts the style of an alert, inheriting the currently applied color, applying it to the text and border, and making its background transparent.

I'm an alert with primary outline.

I'm an alert with secondary outline.

I'm an alert with success outline.

I'm an alert with error outline.

I'm an alert with warning outline.

I'm an alert with info outline.

Tonal

The variant prop provides an easy way to change the overall style of your alerts. The variant="tonal" prop is a simple alert variant that applies a reduced opacity background of the provided color.

I'm an alert with primary tonal.

I'm an alert with secondary tonal.

I'm an alert with success tonal.

I'm an alert with error tonal.

I'm an alert with warning tonal.

I'm an alert with info tonal.

Elevation

Use elevation prop to set a box-shadow to alert.

I'm an alert with 5 elevation.

Prominent

The prominent prop provides a more pronounced alert by increasing the size of the icon.

I'm an alert with prominent prop

I'm an alert with without prominent prop

Introduction
Simple
Icons
Border
Colored Border
Density
Type
Closable
v-model support
Outlined
Tonal
Elevation
Prominent