Flag
Displays a country flag based on an ISO country code.
- Informative flags
- Convey information not otherwise present in the page’s text.
- Must set the
labelattribute to provide an accessible name.
<script setup lang="ts">import { VFlag } from '@vonage/vivid-api-vue';</script>
<template> <div style="display: flex; align-items: center; gap: 8px;"> <VFlag code="DE" label="Germany" /> <span>Shipping destination</span> </div></template><div style="display: flex; align-items: center; gap: 8px;"> <vwc-flag code="DE" label="Germany"></vwc-flag> <span>Shipping destination</span></div>- Decorative flags
- Duplicate information already present in the text, or are purely aesthetic.
- Do not require a
label. - When no
labelis provided,aria-hidden="true"is automatically applied.
<script setup lang="ts">import { VFlag } from '@vonage/vivid-api-vue';</script>
<template> <p><VFlag code="US" /> United States</p></template><p> <vwc-flag code="US"></vwc-flag> United States</p>- Do not use flags as interactive controls.
- If you need an interactive flag, use a component designed for interaction (for example a Button) and include accessible text.