Developer mode
Opens components on the React tab by default.
Your bookmarks

CountryFlag

Displays flags of countries from around the world.

Country flags add simple visual context so users can see the relevant country at a glance.

Remember that while visual cues like flags can help many people process the message, not everyone will benefit from them. Make sure your content is accessible to everyone by including the country name.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Content structure

Flag: works best accompanied by the country name.

Guidelines

Include non-visual information

Flags can create important context for users, but not everyone will see them. So make sure everything necessary is presented in a non-visual form.

If the name of the country isn’t present as text, include it with the flag so anyone who doesn’t see the flag will still get the name. If the name is present, don’t include the name with the flag so it’s not repeated, but do include empty alt text to make it clear the flag is decorative.

import CountryFlag from "@kiwicom/orbit-components/lib/CountryFlag";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";
() => (
  <Stack direction="column">
    <CountryFlag code="cz" name="Czech Republic" />
    <Stack direction="row" spacing="tight" align="center">
      <CountryFlag name="" code="cz" />
      <Text>Czech Republic</Text>
    </Stack>
  </Stack>
)

Related components

Illustration

Country flags help provide visual context. For more guidance on visual components, check out illustrations.

Select

Flags work very well for helping users select the right country. To give them that option, use a select component.