Brand
Displays a brand icon in multi-color or mono variant.
<template> <p>Powered by <VBrand name="vonage" label="Vonage" /></p></template>
<script setup lang="ts"> import {VBrand} from '@vonage/vivid-api-vue';</script>import { registerBrand } from '@vonage/vivid-api';
registerBrand('your-prefix');<script type="module"> import { registerBrand } from '@vonage/vivid-api'; registerBrand('your-prefix');</script>
<p> Powered by <your-prefix-brand name="vonage" label="Vonage"></your-prefix-brand></p>Use the label attribute to provide an accessible name when the brand icon conveys meaning. When no label is provided (or it is whitespace-only), aria-hidden="true" is applied automatically and the icon is treated as decorative.
See the Accessibility section for more information.
Use the size attribute to choose a predefined size scale (shared with vwc-icon).
<script setup lang="ts">import { VBrand } from '@vonage/vivid-api-vue';</script>
<template> <div style="display: flex; gap: 12px; align-items: center;"> <VBrand name="vonage" label="Vonage" size="-4" /> <VBrand name="vonage" label="Vonage" size="0" /> <VBrand name="vonage" label="Vonage" size="2" /> </div></template><div style="display: flex; gap: 12px; align-items: center;"> <vwc-brand name="vonage" label="Vonage" size="-4"></vwc-brand> <vwc-brand name="vonage" label="Vonage" size="0"></vwc-brand> <vwc-brand name="vonage" label="Vonage" size="2"></vwc-brand></div>| Property | Type | Default | Description |
|---|---|---|---|
| label | string | Provides a (screen reader only) descriptive label for the brand icon. | |
| name | string | The brand name to display (e.g. "android", "slack", "vonage"). | |
| size | 0 | 1 | -1 | 2 | 3 | 4 | 5 | -6 | -5 | -4 | -3 | -2 | Controls the rendered size. Uses the same scale and behavior as `Icon.size`. | |
| variant | 'color' | 'mono' | The variant of the brand icon. Defaults to "color". |
| Property | Type | Default | Description |
|---|---|---|---|
| label | string | Provides a (screen reader only) descriptive label for the brand icon. | |
| name | string | The brand name to display (e.g. "android", "slack", "vonage"). | |
| size | 0 | 1 | -1 | 2 | 3 | 4 | 5 | -6 | -5 | -4 | -3 | -2 | Controls the rendered size. Uses the same scale and behavior as `Icon.size`. | |
| variant | 'color' | 'mono' | The variant of the brand icon. Defaults to "color". |