nili/ui
enfaartr
All components

CountryFlag

Overview
14 exports2 variant axes8 props5 files
import { CountryCode, CountryFlag, FlagEntry } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Sizes

Six sizes, 16px to 48px. The artwork is served as a static SVG rather than inlined — 444 flags in the bundle would be about 320 KB of JavaScript every consumer parses whether they render a flag or not.

xs · 16px
sm · 20px
md · 24px
lg · 32px
xl · 40px
2xl · 48px
import { CountryFlag } from "@nili/ui"

export function Example() {
  return (
    <>
      <CountryFlag code="ir" size="xs" />
      <CountryFlag code="ir" size="sm" />
      <CountryFlag code="ir" size="md" />
      <CountryFlag code="ir" size="lg" />
      <CountryFlag code="ir" size="xl" />
      <CountryFlag code="ir" size="2xl" />
    </>
  )
}

Bordered

bordered adds a hairline ring — worth it for flags that are mostly white and would otherwise dissolve into the page.

plain
bordered
import { CountryFlag } from "@nili/ui"

export function Example() {
  return (
    <>
      <CountryFlag code="jp" size="lg" />
      <CountryFlag code="jp" size="lg" bordered />
    </>
  )
}

Labels

Omit label and the flag is decorative — which is what you want whenever the country name is already on screen beside it. Pass one when the flag is the only thing identifying the row.

IranTürkiyeUnited Arab EmiratesSaudi ArabiaGermanyFranceJapanUnited StatesUnited KingdomBrazil
import { CountryFlag } from "@nili/ui"

export function Example() {
  return (
    <>
      {/* decorative: the name is right there */}
      <span>
        <CountryFlag code="de" size="sm" /> Germany
      </span>

      {/* named: nothing else says which country this is */}
      <CountryFlag code="de" size="sm" label="Germany" />
    </>
  )
}

Subdivisions, regions and unknown codes

Codes are case-insensitive. Subdivisions and a few non-country flags use a longer slug. An unrecognised code renders a neutral disc rather than leaving a hole in the row.

Englandgb-eng
Scotlandgb-sct
Cataloniaes-ct
United Nationsx-un
zz (unknown)
import { CountryFlag } from "@nili/ui"

export function Example() {
  return (
    <>
      <CountryFlag code="gb-eng" size="lg" label="England" />
      <CountryFlag code="es-ct" size="lg" label="Catalonia" />
      <CountryFlag code="x-un" size="lg" label="United Nations" />

      {/* not a real code — renders the neutral disc */}
      <CountryFlag code="zz" size="lg" />
    </>
  )
}