Alert

Alerts display short-lived important information to the user, usually at the top or bottom of the screen.

Text

Use the text attribute to set the Alert’s main text.

Headline

Use the headline attribute to add a headline to the Alert.

<script setup lang="ts">
import { VAlert } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAlert headline="This requires your attention" text="Some important information for you" open />
</template>

Connotation

Use the connotation attribute to change the Alert’s icon and icon color.

Each connotation comes with a default icon (that you can override with the icon attribute).

<script setup lang="ts">
import { ref } from 'vue';
import { VAlert, VSelect, VOption } from '@vonage/vivid-api-vue';

const connotation = ref('accent');

</script>

<template>
  <div>
    <VAlert text="Some important information for you" :connotation="connotation" open />

      <VSelect label="Connotation" v-model="connotation">
        <VOption value="accent" text="accent" />
        <VOption value="success" text="success" />
        <VOption value="warning" text="warning" />
        <VOption value="alert" text="alert" />
        <VOption value="information" text="information" />
        <VOption value="announcement" text="announcement" />
      </VSelect>
    </div>

</template>

<vwc-alert text="Some important information for you" connotation="accent" open></vwc-alert>

<vwc-select label="Connotation">
  <vwc-option value="accent" text="accent"></vwc-option>
  <vwc-option value="success" text="success"></vwc-option>
  <vwc-option value="warning" text="warning"></vwc-option>
  <vwc-option value="alert" text="alert"></vwc-option>
  <vwc-option value="information" text="information"></vwc-option>
  <vwc-option value="announcement" text="announcement"></vwc-option>
</vwc-select>

<script>
  document.querySelector('vwc-select').addEventListener('change', (e) => {
    document.querySelector('vwc-alert').connotation = e.currentTarget.value;
  });
</script>

Icon

Use the icon slot to add an icon from the icon library and override the connotation icon.

<script setup lang="ts">
import { VAlert, VIcon } from '@vonage/vivid-api-vue';
</script>

<template>
  <VAlert text="Some important information for you" open
    ><template #icon><VIcon name="megaphone-solid" /></template
  ></VAlert>
</template>

Placement

Use the placement attribute to set the location of the Alert.

<script setup lang="ts">
import { VAlert } from '@vonage/vivid-api-vue';
</script>

<template>
  <div>
    <VAlert class="small-alert" placement="top-start" text="top-start" open />
    <VAlert class="small-alert" placement="top" text="top" open />
    <VAlert class="small-alert" placement="top-end" text="top-end" open />
    <VAlert class="small-alert" placement="bottom-start" text="bottom-start" open />
    <VAlert class="small-alert" placement="bottom" text="bottom" open />
    <VAlert class="small-alert" placement="bottom-end" text="bottom-end" open />
  </div>
</template>

<style scoped>
.small-alert {
  --alert-min-inline-size: 200px;
}
</style>

<vwc-alert class="small-alert" placement="top-start" text="top-start" open></vwc-alert>
<vwc-alert class="small-alert" placement="top" text="top" open></vwc-alert>
<vwc-alert class="small-alert" placement="top-end" text="top-end" open></vwc-alert>
<vwc-alert class="small-alert" placement="bottom-start" text="bottom-start" open></vwc-alert>
<vwc-alert class="small-alert" placement="bottom" text="bottom" open></vwc-alert>
<vwc-alert class="small-alert" placement="bottom-end" text="bottom-end" open></vwc-alert>

<style>
  .small-alert {
    --alert-min-inline-size: 200px;
  }
</style>

Removable

Use the removable attribute to add a close button to the Alert.

<script setup lang="ts">
import { ref } from 'vue';
import { VAlert, VButton } from '@vonage/vivid-api-vue';

const showAlert = ref(true);

function openAlert() {
// Force Vue to recreate the alert
showAlert.value = false;
requestAnimationFrame(() => (showAlert.value = true));
}

</script>

<template>
  <div>
    <VAlert v-if="showAlert" removable text="Some important information for you" open />

      <VButton appearance="outlined" label="Show alert" @click="openAlert" />
    </div>

</template>

<vwc-alert removable text="Some important information for you" open></vwc-alert>

<vwc-button appearance="outlined" label="Show alert" onclick="openAlert()"></vwc-button>

<script>
  function openAlert() {
    document.querySelector('vwc-alert').open = true;
  }
</script>