Alert 🔗

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples 🔗

Wrap any text or HTML in <alert> and use one of the four alert types (success / info / warning / danger) for basic alert messages.

<alert type="success"><b>Well done!</b> You successfully read this important alert message.</alert>
<alert type="info"><b>Heads up!</b> This alert needs your attention, but it's not super important.</alert>
<alert type="warning"><b>Warning!</b> Better check yourself, you're not looking too good.</alert>
<alert type="danger"><b>Oh snap!</b> Change this and that and try again.</alert>
<!-- alert-examples.vue -->

Dismissible 🔗

Use dismissible to allow user to dismiss alerts.

<template>
  <section>
    <alert type="warning" v-if="show" dismissible @dismissed="show = false">
      <b>Warning!</b> Better check yourself, you're not looking too good.
    </alert>
    <alert v-for="(item, index) in alerts" dismissible :key="item.key" @dismissed="alerts.splice(index, 1)">
      <b>Heads up!</b> This alert needs your attention, but it's not super important.
    </alert>
    <hr/>
    <btn type="primary" @click="addDismissibleAlert()">Add Dismissible Alert</btn>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        show: true,
        alerts: []
      }
    },
    methods: {
      addDismissibleAlert () {
        this.alerts.push({key: new Date().getTime()})
      }
    }
  }
</script>
<!-- alert-dismissible.vue -->

Auto dismissing 🔗

Use duration in milliseconds to auto dismiss alert. It can be used together with dismissible.

<template>
  <section>
    <alert v-for="(item, index) in alerts" :duration="duration" :key="item.key" @dismissed="alerts.splice(index, 1)">
      This alert <b>will dismiss after {{duration}}ms</b>.
    </alert>
    <hr/>
    <btn type="primary" @click="addAutoDismissAlert()">Add Auto Dismiss Alert</btn>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        alerts: [],
        duration: 2000
      }
    },
    methods: {
      addAutoDismissAlert () {
        this.alerts.push({key: new Date().getTime()})
      }
    }
  }
</script>
<!-- alert-auto-dismissing.vue -->

Use with collapse 🔗

<template>
  <section>
    <btn type="primary" @click="show = !show">Toggle Collapsing Alert</btn>
    <hr/>
    <collapse v-model="show">
      <alert type="warning" dismissible @dismissed="show = false">This alert <b>will collapse on open / close</b>.</alert>
    </collapse>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        show: true
      }
    }
  }
</script>
<!-- alert-with-collapse.vue -->

API Reference 🔗

Alert 🔗

Props 🔗

Slots 🔗

Events 🔗