Skip to content
UI
v0.3.1

Search the docs

CountryFlag

A country as its code chip, named in the reader’s language.

Example

Germany Brazil MT SE
country-flag.example.svelte 
<script lang="ts">
  import { CountryFlag } from '@onlywin/ui-svelte';
</script>

<div class="example-row">
  <CountryFlag code="DE" showName />
  <CountryFlag code="BR" showName />
  <CountryFlag code="MT" />
  <CountryFlag code="SE" />
</div>

Usage

Do

  • Show the name next to it where space allows.

Don’t

  • Do not use a flag to mean a language.

Accessibility

  • The flag is named by the country in the current language.

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

CountryFlag props
Prop Type Default Description
code *required string — ISO 3166-1 alpha-2 (`DE`).
showName boolean false Shows the region's name next to the flag.