Flag
Displays a country flag based on an ISO country code.
<template> <p>Shipping to <VFlag code="DE" label="Germany" /> Germany</p></template>
<script setup lang="ts"> import {VFlag} from '@vonage/vivid-api-vue';</script>import { registerFlag } from '@vonage/vivid-api';
registerFlag('your-prefix');<script type="module"> import { registerFlag } from '@vonage/vivid-api'; registerFlag('your-prefix');</script>
<p> Shipping to <your-prefix-flag code="DE" label="Germany"></your-prefix-flag> Germany</p>Use the label attribute to provide an accessible name when the flag conveys meaning. When no label is provided (or it is whitespace-only), aria-hidden="true" is applied automatically and the flag 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 { VFlag } from '@vonage/vivid-api-vue';</script>
<template> <div style="display: flex; gap: 12px; align-items: center;"> <VFlag code="US" label="United States" size="-4" /> <VFlag code="US" label="United States" size="0" /> <VFlag code="US" label="United States" size="2" /> </div></template><div style="display: flex; gap: 12px; align-items: center;"> <vwc-flag code="US" label="United States" size="-4"></vwc-flag> <vwc-flag code="US" label="United States" size="0"></vwc-flag> <vwc-flag code="US" label="United States" size="2"></vwc-flag></div>| Property | Type | Default | Description |
|---|---|---|---|
| code | string | ISO 3166-1 alpha-2 country code (e.g. "GB", "UK", "US"). When set, the component shows the matching flag (from the Vivid/Vonage icon set). | |
| label | string | Provides a (screen reader only) descriptive label for the flag. | |
| 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`. |
| Property | Type | Default | Description |
|---|---|---|---|
| code | string | ISO 3166-1 alpha-2 country code (e.g. "GB", "UK", "US"). When set, the component shows the matching flag (from the Vivid/Vonage icon set). | |
| label | string | Provides a (screen reader only) descriptive label for the flag. | |
| 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`. |