Flag

Displays a country flag based on an ISO country code.

Flag

Use Flag to display a country flag based on an ISO 3166-1 alpha-2 country code.

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

<template>
  <div style="display: flex; gap: 12px; align-items: center;">
    <VFlag code="DE" label="Germany" />
    <VFlag code="JP" label="Japan" />
    <VFlag code="US" label="United States" />
  </div>
</template>

<div style="display: flex; gap: 12px; align-items: center;">
  <vwc-flag code="DE" label="Germany"></vwc-flag>
  <vwc-flag code="JP" label="Japan"></vwc-flag>
  <vwc-flag code="US" label="United States"></vwc-flag>
</div>

Size

The size attribute controls the rendered dimensions using the same predefined scale as 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="DE" label="Germany" size="-4" />
    <VFlag code="DE" label="Germany" size="0" />
    <VFlag code="DE" label="Germany" size="2" />
    <VFlag code="DE" label="Germany" size="4" />
  </div>
</template>

<div style="display: flex; gap: 12px; align-items: center;">
  <vwc-flag code="DE" label="Germany" size="-4"></vwc-flag>
  <vwc-flag code="DE" label="Germany" size="0"></vwc-flag>
  <vwc-flag code="DE" label="Germany" size="2"></vwc-flag>
  <vwc-flag code="DE" label="Germany" size="4"></vwc-flag>
</div>

Decorative vs Informative

When label is omitted (or whitespace-only), the flag is treated as decorative and aria-hidden="true" is applied automatically.

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

<template>
  <p><VFlag code="US" /> United States</p>
  <p><VFlag code="US" label="United States" /> United States</p>
</template>