#Country

Shows one country from its ISO 3166-1 alpha-2 code — CountryFlag, CountryName, or both — and only ever a country: a flag names a place, not a language. Compose the name next to the flag wherever the reader could be in any doubt, and expect an unrecognised code to drop the flag and print the code itself.

Source · Storybook

#Usage

import { Country, CountryFlag, CountryName } from '@wallarm-org/design-system/Country';

#Examples

#Sizes

small is the default: a 16px flag against xs type, where medium takes both a step up to 20px and sm.

#Flag only

The flag on its own, for a cell whose column heading already says these are countries — anywhere else, the reader is guessing.

#Name only

The name on its own, for a list being read rather than scanned, where a column of flags would only add colour.

#Examples

Ten countries together, which is really a check on consistency: every flag is cropped to the same circle, so wide and tall designs still line up down the column.

#Props

#CountryFlag

#CountryName

#Explorer