Alert

Component source on Github This page on Github

Reference

v-modelundefined
Boolean
Visiblity state of the alert. Skip v-model to make alert static
auto-dismiss-delay0
Number
Delay after which alert is closed
base"alert"
String
Base name used to style component
close-button
(attributes)
{}
Object
Attributes of the v-close-button component. See documentation for the valid values
dismissabletrue
Boolean
If false close button is not rendered and the alert cannot be dissmised
iconempty string
String
Alert has few default icons for variants: 'success', 'warn', 'danger', 'info', 'valid', 'invalid'. Icon or default slot can be used for a custom icon.
mod-alertempty string
String
Style of the main alert element
mod-iconempty string
String
Style of the icon element
nameempty string
String
Name of the component
variantempty string
String
Active variant of the element mod-* props
Slots
icon
Slot for the icon prepending message
default
Slot for the alerts content

Example - simple alert

    <template>
  <v-alert
    v-model="example.isVisible"
    icon="info"
    mod-alert="text:bold variant:info"
  >
    Alert
  </v-alert>
</template>
  

    
  

  
    <script>
import { reactive } from "vue";

export default {
  setup() {
    let example = reactive({
      isVisible: true,
    });

    return {
      example,
    };
  },
};
</script>

Example - props

Static alert

Styled alert

info
true
    <template>
  <!-- static alert -->

  <p class="my-6">Static alert</p>

  <v-alert
    icon="example.variant"
    :variant="example.variant"
    mod-alert="text:bold info?variant:info danger?variant:danger warn?variant:warn success?variant:success invalid?variant:danger valid?variant:success"
  >
    Alert
  </v-alert>

  <!-- styled alert -->

  <p class="my-6">Styled alert</p>

  <v-alert
    v-model="example.isVisible"
    :dismissable="example.dismissable"
    :auto-dismiss-delay="example.autoDismissDelay"
    :icon="example.variant"
    :variant="example.variant"
    mod-alert="text:bold shadow:medium special:outline info?variant:info danger?variant:danger warn?variant:warn success?variant:success invalid?variant:danger valid?variant:success"
  >
    Alert
  </v-alert>

</template>
  

    
  

  
    <script setup>
import { reactive } from "vue";

let example = reactive({
  isVisible: true,
  isVisibleAbsolute: false,
  dismissable: true,
  autoDismissDelay: 0,
  variant: "info",
  icon: "info",
});
</script>