Flag

Displays a country flag based on an ISO country code.

Use Cases

Country List

Use Flag alongside text in lists (for example a country picker or shipping destination list).

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

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

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

Decorative Flags in Text

If the country name is already present as text, omit label so the flag remains decorative.

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

<template>
  <p><VFlag code="DE" /> Germany</p>
  <p><VFlag code="JP" /> Japan</p>
  <p><VFlag code="US" /> United States</p>
</template>