Skip to content
On this page

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.

<template>
  <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
  >
</template>

<script setup>
import { Alert } from 'uiv';
</script>

Dismissible

Use dismissible to allow user to dismiss alerts.

<template>
  <Alert v-if="show" type="warning" dismissible @dismissed="show = false">
    <b>Warning!</b> Better check yourself, you're not looking too good.
  </Alert>
  <Alert
    v-for="(item, index) in alerts"
    :key="item.key"
    dismissible
    @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>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { Alert, Btn } from 'uiv';

const show = ref(true);
const alerts = reactive([]);

function addDismissibleAlert() {
  alerts.push({ key: new Date().getTime() });
}
</script>

Auto dismissing

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

<template>
  <Alert
    v-for="(item, index) in alerts"
    :key="item.key"
    :duration="duration"
    @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
  >
</template>

<script setup>
import { reactive } from 'vue';
import { Alert, Btn } from 'uiv';

const alerts = reactive([]);
const duration = 2000;

function addAutoDismissAlert() {
  alerts.push({ key: new Date().getTime() });
}
</script>

Use with collapse

<template>
  <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>
</template>

<script setup>
import { ref } from 'vue';
import { Alert, Btn, Collapse } from 'uiv';

const show = ref(true);
</script>

API Reference

Alert

Props

NameTypeDefaultRequiredDescription
dismissibleBooleanfalseShow dismiss button in alert.
typeStringinfoAlert type (success, info, warning, danger).
durationNumber0Dismiss after milliseconds, use 0 to prevent self-closing.

Slots

NameDescription
defaultThe alert body.

Events

NameParamsDescription
dismissedFire after the alert dismissed. Note: you have to hide / destroy the alert using v-if / v-show / v-for manually due to child components can't change state of parent component.