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>
  <div class="uiv">
    <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
    >
  </div>
</template>

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

Dismissible

Use dismissible to allow user to dismiss alerts.


<template>
  <section class="uiv">
    <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
    >
  </section>
</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>
  <section class="uiv">
    <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
    >
  </section>
</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>
  <section class="uiv">
    <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 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.