> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt. # 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](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Country) ยท [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/data-display-country--overview) ```tsx import { Country, CountryFlag, CountryName } from '@wallarm-org/design-system/Country'; export const Basic = args => ( ); ``` ## Usage ```tsx 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`. ```tsx import { Country, CountryFlag, CountryName } from '@wallarm-org/design-system/Country'; import { HStack } from '@wallarm-org/design-system/Stack'; export const Sizes = () => ( ); ``` ### Flag only The flag on its own, for a cell whose column heading already says these are countries โ€” anywhere else, the reader is guessing. ```tsx import { Country, CountryFlag } from '@wallarm-org/design-system/Country'; import { HStack } from '@wallarm-org/design-system/Stack'; export const FlagOnly = () => ( ); ``` ### Name only The name on its own, for a list being read rather than scanned, where a column of flags would only add colour. ```tsx import { Country, CountryName } from '@wallarm-org/design-system/Country'; import { VStack } from '@wallarm-org/design-system/Stack'; export const NameOnly = () => ( ); ``` ### 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. ```tsx import { Country, CountryFlag, CountryName } from '@wallarm-org/design-system/Country'; import { VStack } from '@wallarm-org/design-system/Stack'; export const Examples = () => ( ); ``` ## Props | Prop | Type | Default | Description | | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------- | | title | `string \| undefined` | | | | defaultChecked | `boolean \| undefined` | | | | defaultValue | `string \| number \| readonly string[] \| undefined` | | | | autoFocus | `boolean \| undefined` | | | | id | `string \| undefined` | | | | tabIndex | `number \| undefined` | | | | rel | `string \| undefined` | | | | onChange | `ChangeEventHandler \| undefined` | | | | size | `{ small: string; medium: string; }` | `small` | | | asChild | `boolean \| undefined` | `false` | | | code \* | `"AF" \| "AX" \| "AL" \| "DZ" \| "AS" \| "AD" \| "AO" \| "AI" \| "AG" \| "AR" \| "AM" \| "AW" \| "AU" \| "AT" \| "AZ" \| "BS" \| "BH" \| "BD" \| "BB" \| "BY" \| "BE" \| "BZ" \| "BJ" \| "BM" \| "BT" \| "BO" \| "BQ" \| "BA" \| "BW" \| "BV" \| "BR" \| "IO" \| "BN" \| "BG" \| "BF" \| "BI" \| "CV" \| "KH" \| "CM" \| "CA" \| "KY" \| "CF" \| "TD" \| "CL" \| "CN" \| "CX" \| "CC" \| "CO" \| "KM" \| "CG" \| "CD" \| "CK" \| "CR" \| "CI" \| "HR" \| "CU" \| "CW" \| "CY" \| "CZ" \| "DK" \| "DJ" \| "DM" \| "DO" \| "DNO" \| "EC" \| "EG" \| "SV" \| "GQ" \| "ER" \| "EE" \| "ET" \| "FK" \| "FO" \| "FJ" \| "FI" \| "FR" \| "GF" \| "PF" \| "TF" \| "GA" \| "GM" \| "GE" \| "DE" \| "GH" \| "GI" \| "GR" \| "GL" \| "GD" \| "GP" \| "GU" \| "GT" \| "GG" \| "GN" \| "GW" \| "GY" \| "HT" \| "HM" \| "VA" \| "HN" \| "HK" \| "HU" \| "IS" \| "IN" \| "ID" \| "IR" \| "IQ" \| "IE" \| "IM" \| "IL" \| "IT" \| "JM" \| "JP" \| "JE" \| "JO" \| "KZ" \| "KE" \| "KI" \| "KP" \| "KR" \| "KW" \| "KG" \| "LA" \| "LV" \| "LB" \| "LS" \| "LR" \| "LY" \| "LI" \| "LT" \| "LHO" \| "LU" \| "MO" \| "MK" \| "MG" \| "MW" \| "MY" \| "MV" \| "ML" \| "MT" \| "MH" \| "MQ" \| "MR" \| "MU" \| "YT" \| "MX" \| "FM" \| "MD" \| "MC" \| "MN" \| "ME" \| "MS" \| "MA" \| "MZ" \| "MM" \| "NA" \| "NR" \| "NP" \| "NL" \| "NC" \| "NZ" \| "NI" \| "NE" \| "NG" \| "NU" \| "NF" \| "MP" \| "NO" \| "OM" \| "PK" \| "PW" \| "PS" \| "PA" \| "PG" \| "PY" \| "PE" \| "PH" \| "PN" \| "PL" \| "PT" \| "PR" \| "QA" \| "ROC" \| "RE" \| "RO" \| "RU" \| "RW" \| "BL" \| "SH" \| "KN" \| "LC" \| "MF" \| "PM" \| "VC" \| "WS" \| "SM" \| "ST" \| "SA" \| "SN" \| "RS" \| "SC" \| "SL" \| "SG" \| "SX" \| "SK" \| "SI" \| "SB" \| "SO" \| "ZA" \| "GS" \| "SS" \| "ES" \| "LK" \| "SD" \| "SR" \| "SJ" \| "SZ" \| "SE" \| "CH" \| "SY" \| "TW" \| "TJ" \| "TZ" \| "TH" \| "TL" \| "TG" \| "TK" \| "TO" \| "TT" \| "TN" \| "TR" \| "TM" \| "TC" \| "TV" \| "UG" \| "UA" \| "AE" \| "GB" \| "US" \| "UY" \| "UZ" \| "VU" \| "VE" \| "VN" \| "VG" \| "VI" \| "WF" \| "EH" \| "YE" \| "ZM" \| "ZW"` | | | | data-testid | `string \| undefined` | | | ### CountryFlag | Prop | Type | Default | Description | | -------------- | ---------------------------------------------------- | ------- | ----------- | | title | `string \| undefined` | | | | defaultChecked | `boolean \| undefined` | | | | defaultValue | `string \| number \| readonly string[] \| undefined` | | | | autoFocus | `boolean \| undefined` | | | | id | `string \| undefined` | | | | tabIndex | `number \| undefined` | | | | rel | `string \| undefined` | | | | onChange | `ChangeEventHandler \| undefined` | | | | height | `string \| number \| undefined` | | | | loading | `"eager" \| "lazy" \| undefined` | | | | width | `string \| number \| undefined` | | | ### CountryName | Prop | Type | Default | Description | | -------------- | ---------------------------------------------------- | ------- | ----------- | | defaultChecked | `boolean \| undefined` | | | | defaultValue | `string \| number \| readonly string[] \| undefined` | | | | autoFocus | `boolean \| undefined` | | | | id | `string \| undefined` | | | | tabIndex | `number \| undefined` | | | | title | `string \| undefined` | | | | rel | `string \| undefined` | | | | onChange | `ChangeEventHandler \| undefined` | | | ## Explorer