Brand

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

Use Cases

Brand Icon in a Button Slot

Use Brand inside a button’s icon slot to display a brand logo alongside button text.

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

<template>
  <VButton label="Sign in with Slack">
    <VBrand slot="icon" name="slack" />
  </VButton>
</template>

Integration List

Use Brand alongside text in lists to visually identify third-party integrations or platforms.

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

<template>
  <div style="display: grid; gap: 8px;">
    <div style="display: flex; gap: 8px; align-items: center;">
      <VBrand name="slack" label="Slack" />
      <span>Slack</span>
    </div>
    <div style="display: flex; gap: 8px; align-items: center;">
      <VBrand name="facebook" label="Facebook" />
      <span>Facebook</span>
    </div>
    <div style="display: flex; gap: 8px; align-items: center;">
      <VBrand name="whatsapp" label="WhatsApp" />
      <span>WhatsApp</span>
    </div>
  </div>
</template>

<div style="display: grid; gap: 8px;">
  <div style="display: flex; gap: 8px; align-items: center;">
    <vwc-brand name="slack" label="Slack"></vwc-brand>
    <span>Slack</span>
  </div>
  <div style="display: flex; gap: 8px; align-items: center;">
    <vwc-brand name="facebook" label="Facebook"></vwc-brand>
    <span>Facebook</span>
  </div>
  <div style="display: flex; gap: 8px; align-items: center;">
    <vwc-brand name="whatsapp" label="WhatsApp"></vwc-brand>
    <span>WhatsApp</span>
  </div>
</div>

Mono Variant in Text

Use the mono variant when brand icons appear alongside monochrome text and you want them to blend in.

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

<template>
  <p><VBrand name="github" variant="mono" /> View on GitHub</p>
  <p><VBrand name="linkedin" variant="mono" /> Connect on LinkedIn</p>
</template>