Brand

Displays a brand icon in multi-color or mono variant.

• Informative brand icons
  • Convey information not otherwise present in the page’s text.
  • Must set the label attribute to provide an accessible name.

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

<template>
  <div style="display: flex; align-items: center; gap: 8px;">
    <VBrand name="slack" label="Slack" />
    <span>Connect via Slack</span>
  </div>
</template>

<div style="display: flex; align-items: center; gap: 8px;">
  <vwc-brand name="slack" label="Slack"></vwc-brand>
  <span>Connect via Slack</span>
</div>

• Decorative brand icons
  • Duplicate information already present in the text, or are purely aesthetic.
  • Do not require a label.
  • When no label is provided, aria-hidden="true" is automatically applied.

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

<template>
  <p><VBrand name="slack" /> Slack</p>
</template>

<p>
  <vwc-brand name="slack"></vwc-brand> Slack
</p>

• Do not use brand icons as interactive controls.
• If you need an interactive brand icon, use a component designed for interaction (for example a Button with a brand icon in the icon slot) and include accessible text.

• WAI Images Tutorial: Decorative vs Informative Images