Skip to main content

​
VAlert

The VAlert component is used to convey important information to users through the use of contextual types, icons, and colors.

​
Usage

Alerts in their simplest form are a flat sheet of paper that displays a message. 
<template>
  <v-alert>This is an alert</v-alert>
</template>

​
Alert Types

The type prop provides four default contextual alert styles: success, info, warning, and error. 
<template>
  <div>
    <v-alert type="success">Success alert</v-alert>
    <v-alert type="info">Info alert</v-alert>
    <v-alert type="warning">Warning alert</v-alert>
    <v-alert type="error">Error alert</v-alert>
  </div>
</template>
When using the type prop, the appropriate icon is automatically assigned unless overridden with the icon prop.

​
Closable Alerts

The closable prop adds a close button to the end of the alert component. 
<template>
  <v-alert closable>This alert can be closed</v-alert>
</template>

​
Border

The border prop adds a simple border to one of the 4 sides of the alert. Accepts top, end, bottom, and start. 
<template>
  <div>
    <v-alert border="start" type="warning">
      I'm an alert with a start border
    </v-alert>
    <v-alert border="top" type="error">
      I'm an alert with a top border
    </v-alert>
  </div>
</template>

​
Prominent

The prominent prop provides a more pronounced alert by increasing the height and applying a larger icon. 
<template>
  <v-alert prominent type="info">
    I'm a prominent alert
  </v-alert>
</template>

​
Custom Icon

You can customize the alert icon using the icon prop, or disable it entirely by setting icon to false. 
<template>
  <div>
    <v-alert icon="mdi-home" type="success">
      Custom icon alert
    </v-alert>
    <v-alert :icon="false" type="warning">
      Alert with no icon
    </v-alert>
  </div>
</template>

​
Props

​
type
'success' | 'info' | 'warning' | 'error'
Specifies a contextual style. Automatically applies a corresponding icon unless overridden.
​
title
string
Specify a title text for the alert.
​
text
string
Specify body text for the alert.
​
closable
boolean
default:"false"
Adds a close button to the end of the alert.
​
closeIcon
string
default:"$close"
Change the default icon used for closable alerts.
​
closeLabel
string
default:"$vuetify.close"
Accessible label for the close button.
​
icon
string | false
default:"null"
Designates a specific icon. Set to false to disable the icon.
​
modelValue
boolean
default:"true"
Controls whether the alert is visible or hidden.
​
prominent
boolean
default:"false"
Displays a larger, more prominent alert with a bigger icon.
​
border
boolean | 'top' | 'end' | 'bottom' | 'start'
Puts a border on the alert. Accepts true or a string specifying the side.
​
borderColor
string
Specifies the color of the border.
​
color
string
Applies specified color to the control.
​
variant
string
default:"flat"
Applies a distinct style to the component. Options include: flat, elevated, tonal, outlined, text, plain.
​
density
'default' | 'comfortable' | 'compact'
Adjusts the vertical spacing within the component.
​
elevation
string | number
Designates an elevation applied to the component between 0 and 24.
​
rounded
string | number | boolean
Designates the border-radius applied to the component.

​
Slots

​
default
The default Vue slot for alert content.
​
prepend
Adds an item to the prepend section of the alert.
​
title
Slot for the alert title.
​
text
Slot for the alert text content.
​
append
Adds an item to the append section of the alert.
​
close
Slot for customizing the close button.

​
Events

​
click:close
(e: MouseEvent) => void
Emitted when the close button is clicked.
​
update:modelValue
(value: boolean) => void
Emitted when the alert visibility changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us