Appearance
Alert
Alerts should be used when there are tips or information that a user can benefit from.
Import
javascript
import { VAlert } from 'vuetify'
Usage
Label
Lorem ipsum dolor sit amet consectetur adipisicing elit. A quibusdam minima atque possimus exercitationem repellendus adipisci tenetur aliquid ab optio in odio distinctio placeat, suscipit recusandae, est nulla dicta nemo fugiat nobis dolores debitis quisquam. Temporibus excepturi illo assumenda culpa velit fuga, accusantium dicta ipsam totam, deserunt accusamus iste qui.
html
<v-alert variant="primary"> Lorem ipsum </v-alert>
Alert variants
Label
Lorem ipsum
Label
Lorem ipsum dolor sit amet.
Label
Lorem ipsum dolor sit amet.
Label
Lorem ipsum dolor sit amet.
html
<v-alert variant="primary">Lorem ipsum</v-alert>
<v-alert variant="success">Lorem ipsum dolor sit amet.</v-alert>
<v-alert variant="warning"> Lorem ipsum dolor sit amet. </v-alert>
<v-alert variant="danger"> Lorem ipsum dolor sit amet. </v-alert>
Alert without controls
Label
Lorem ipsum
html
<v-alert variant="primary" :controls="false">Lorem ipsum</v-alert>
Alert without text
Label
html
<v-alert variant="primary" :controls="false" />
Alert with different label
Different Label
Lorem ipsum
html
<v-alert variant="primary" label="Different Label"> Lorem ipsum </v-alert>