#Alerts

#Content

The v-alert component supports simple content using the title and text props. This approach is best for strings that do not need custom styling.

The following code snippet is an example of a basic v-alert component only containing text:

<v-alert text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus..."></v-alert>

Adding a title is as easy as defining its value. The next example adds a string title to accompany the content text:

Notice how the alert does not have a color or icon. This is defined using the type property.

#Type

Alerts have 4 contextual states: success, info, warning, and error. Each state has a default color and icon associated with it. When a type is not provided, the v-alert component defaults to a greyish background.

With a basic alert rendered, add your choice of contextual type. The following example puts the v-alert component in a success state:

#Color and icon

The type property acts as a shorthand for a color and icon combination, you can use both props individually to achieve the same effect. The following example produces the same result as using type=“success” by defining a custom color and using the icon lookup table to get the globally defined success icon:

<v-alert
  color="success"
  icon="$success"
  title="Alert title"
  text="Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus..."
></v-alert>

#Density

The v-alert component has the ability to reduce its height in intervals using the density prop. This is useful when you need to reduce the vertical space a component needs. The following example reduces the vertical space by using density=“compact”:

The density prop supports 3 levels of component height; default, comfortable, and compact.

#Variants

The v-alert has 6 style variants, elevated, flat, tonal, outlined, text, and plain. By default, the v-alert component is flat; which means that it has a solid background and no box-shadow (elevation). The following example modifies the overall styling of the alert with a custom variant:

#Closable

The closable prop adds a v-icon on the far right, after the main content. This control hides the v-alert when clicked, setting it’s internal model to false. Manually control the visibility of the alert by binding v-model or using model-value. The following example uses a dynamic model that shows and hides the v-alert component:

The close icon automatically applies a default aria-label and is configurable by using the close-label prop or changing close value in your locale.