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.

Usage

Alerts in their simplist form displays a message with default theme and style.

API

v-alert

Examples

Border

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

Colored Border

The color-border prop merges the styles of both outlined and border props. This prop requires a border to be set and will swap the background color to the border. 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).

Dense

The dense prop hides the icon and descreases the height of the alert creating a simple and compact style. This prop, when combined with border, will decrease the border thickness to stay consistant with the style.

Dismissible

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. Applying the close-label prop will apply aria-label for this type of alert.

Icon

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

Outlined

The outlined prop inverts the style of an alert, inheriting its background color from the current theme background and inheriting its border color from the components applied color.

Prominent

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.

Text

The text prop is a simple alert variant that applies a transparent background and the colors from props color and type to its text. Similiar to other styled props, text can be combined with other props like dense, prominent, and outlined to effectively color the text.

Transition

The transition prop allows you to apply a transition to the alert which is viewable when the component hides and shows. You can use any of Vuetifies prebuilt transitions found here or you may create your own.

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. The default colors can be configured globally by customizing Vuetify's theme.

Twitter alert

By combining color, dismissible, border, elevation, icon, and color-border props you can create stylish custom alerts such as this twitter notification.

Edit this page | language on Github