Components › Identity › Identity marks › Country flag

Country flag

beta

Flat vector flag of a country (30 × 20, rounded, hairline outline) — the mark of a phone number by its dialling code.

Owner-approved 15 Oct 2026 in prototype proto/telefony-pin-puk (picks ACRM-515, ACRM-518: „vlajky úplně jednoduše, plošně vektorově", style reference nucleoapp.com/svg-flag-icons — own drawing, no Nucleo SVG copied, licence unclear). First use: /telefony identity column and drawer head (acrm !5089). Covers the 50 countries of DIAL_CODES; unknown code falls back to the grey phone tile. Before beta: move to packages/ui next to EntityMark, stories (all flags, sizes sm/lg, fallback), props. DialCodePicker („CZ +420 ▾") stays WITHOUT a flag — owner decision 15 Oct 2026. Registry repaired 17 Oct 2026 (review F1, F10): Flag/PhoneFlag now live in packages/ui/src/components/CountryFlag.tsx and are exported from @acrm/ui. Registry repaired 17 Oct 2026 (review F3): mapped existing Ladle stories. Beta 17 Oct 2026 (AD): moved to @acrm/ui next to EntityMark with stories Default · Variants · Sizes · States · Composition + 10 light/dark baselines (acrm !5124, 445b2e68b). AD 17 Oct 2026: a number without a dialling code is read as Czech (splitDial falls back to DEFAULT_DIAL +420, the same default as DialCodePicker and the phone mask) and shows the Czech flag — it is dialled as Czech; the grey phone tile stays only for a code outside DIAL_CODES. Canon after a dev check of /telefony with real data 1440/390 light/dark.

Used in 2 files · 2 areas · 2× — pages/TelefonyPage, pages/telefony

@acrm/ui <Flag> <PhoneFlag>.acrm-flagSourceStory
ExamplesCodeUsageAccessibilityChangelog

Keyboard

  • Not interactive. The flag is never a control.

ARIA

  • Flag without title is aria-hidden="true". The number next to it already carries the dialling code.
  • Flag with title becomes role="img" with aria-label, for a place where the flag stands alone.
  • PhoneFlag sets the country name as title on the mark box (a tooltip for sighted users) and keeps the SVG hidden.

Focus

  • Takes no focus.

Contrast

  • The hairline outline (#000 at 18 % opacity) separates white and pale flags from --bg-canvas in light mode. In dark mode the flag colours carry their own contrast against the dark surface.

Known limits

  • Flags are simplified. Fine emblems (Spain, Portugal, Mexico, Saudi Arabia) are reduced to one shape and are recognisable by their colours, not by the emblem.
  • 50 countries, matching DIAL_CODES. A new dialling code needs a new drawing, otherwise the grey tile shows.

Source: docs/avatar/country-flag.a11y.md · GitLab