Banner

Banner displays a prominent message, usually on system level, and provides actions for users to address or dismiss.

Text

The text attribute sets the banner’s text.

Connotation

The connotation attribute controls the purpose of the banner, expressed in its colors and icon.

The Banner icon, if not specifically set, defaults to a connotation-associated icon.

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

<template>
  <VBanner connotation="information" text="Banner with connotation information (default conntation)" />
  <VBanner connotation="announcement" text="Banner with connotation announcement" />
  <VBanner connotation="success" text="Banner with connotation success" />
  <VBanner connotation="warning" text="Banner with connotation warning" />
  <VBanner connotation="alert" text="Banner with connotation alert" />
</template>

<vwc-banner connotation="information" text="Banner with connotation information (default conntation)"></vwc-banner>
<vwc-banner connotation="announcement" text="Banner with connotation announcement"></vwc-banner>
<vwc-banner connotation="success" text="Banner with connotation success"></vwc-banner>
<vwc-banner connotation="warning" text="Banner with connotation warning"></vwc-banner>
<vwc-banner connotation="alert" text="Banner with connotation alert"></vwc-banner>

Icon

Use the icon slot to add an icon from the icon library.

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

<template>
  <VBanner text="Banner with icon set by icon attribute"
    ><template #icon><VIcon name="home-line" /></template
  ></VBanner>
</template>

Removable

The removable attribute adds a remove button. On click, it will remove the banner from the DOM.