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

Modal

Forces users to complete an action before continuing.

Sometimes there’s an action you want a user to take or information you want them to acknowledge but it’s not a part of their main flow. Force them to focus on a single action by using a modal.

Modals cover any other content until an action is completed or the modal is dismissed. Because modals interrupt a user’s main flow, use as few as possible to minimize disruption. If you have only a single simple action, consider using a dialog.

Component status

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

Content structure

Title: sets the context and works best when short; illustration: visually supports the message; description: optionally adds more context; suppressed section: optionally adds options or explanations and can include more complex structures; section: optionally adds options or explanations and can include more complex structures; close button: optionally enables users to close the modal; footer: optionally adds an area for actions or next steps and can be fixed to always appear.

Guidelines

Structure content

Modals are flexible enough to include many types of information. If you’re including multiple types or multiple examples of the same type, structure the information to make it easy for users to scan. 

You can use modal sections to add structure to the modal and even, if your content can be logically grouped, include cards to group the information even further.

For example, if you have options to offer for each segment of a trip, you can use modal sections for each sector (such as inbound and outbound of a round trip) and cards inside them with card sections for each segment.

import Card, { CardSection } from "@kiwicom/orbit-components/lib/Card";
import CarrierLogo from "@kiwicom/orbit-components/lib/CarrierLogo";
import FlightDirect from "@kiwicom/orbit-components/lib/icons/FlightDirect";
import Illustration from "@kiwicom/orbit-components/lib/Illustration";
import Modal, { ModalHeader, ModalSection, ModalFooter } from "@kiwicom/orbit-components/lib/Modal";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";
<Modal onClose={"close"} fixedFooter>
  <ModalHeader
    title="Enjoy a meal while you travel"
    illustration={<Illustration name="Meal" size="small" />}
    description="See what’s available for each segment of your trip."
  />
  <ModalSection suppressed>
    <Stack>
      <Text uppercase weight="bold">
        Outbound
      </Text>
      <Card>
        <CardSection
          icon={
            <CarrierLogo
              carriers={[{ code: "G9", name: "Air Arabia" }]}
              size="large"
            />
          }
          title={
            <Stack direction="row" spacing="tight" align="center">
              <Text weight="bold">Cairo CAI</Text>
              <FlightDirect size="small" />
              <Text weight="bold">Dubai SHJ</Text>
            </Stack>
          }
          actions={
            <Button type="secondary" size="small">
              See meals
            </Button>
          }
        />
        <CardSection
          icon={
            <CarrierLogo
              carriers={[{ code: "G9", name: "Air Arabia" }]}
              size="large"
            />
          }
          title={
            <Stack direction="row" spacing="tight" align="center">
              <Text weight="bold">Dubai SHJ</Text>
              <FlightDirect size="small" />
              <Text weight="bold">Mumbai BOM</Text>
            </Stack>
          }
          actions={
            <Button type="secondary" size="small">
              See meals
            </Button>
          }
        />
        <CardSection
          icon={
            <CarrierLogo
              carriers={[{ code: "G8", name: "Go Air" }]}
              size="large"
            />
          }
          title={
            <Stack direction="row" spacing="tight" align="center">
              <Text weight="bold">Mumbai BOM</Text>
              <FlightDirect size="small" />
              <Text weight="bold">Malé MLE</Text>
            </Stack>
          }
          actions={
            <Button type="secondary" size="small">
              See meals
            </Button>
          }
        />
      </Card>
    </Stack>
  </ModalSection>
  <ModalSection>
    <Stack>
      <Text uppercase weight="bold">
        Inbound
      </Text>
      <Card>
        <CardSection
          icon={
            <CarrierLogo
              carriers={[{ code: "G8", name: "Go Air" }]}
              size="large"
            />
          }
          title={
            <Stack direction="row" spacing="tight" align="center">
              <Text weight="bold">Malé MLE</Text>
              <FlightDirect size="small" />
              <Text weight="bold">Mumbai BOM</Text>
            </Stack>
          }
          actions={
            <Button type="secondary" size="small">
              See meals
            </Button>
          }
        />
        <CardSection
          icon={
            <CarrierLogo
              carriers={[{ code: "G9", name: "Air Arabia" }]}
              size="large"
            />
          }
          title={
            <Stack direction="row" spacing="tight" align="center">
              <Text weight="bold">Mumbai BOM</Text>
              <FlightDirect size="small" />
              <Text weight="bold">Dubai SHJ</Text>
            </Stack>
          }
          actions={
            <Button type="secondary" size="small">
              See meals
            </Button>
          }
        />
        <CardSection
          icon={
            <CarrierLogo
              carriers={[{ code: "G9", name: "Air Arabia" }]}
              size="large"
            />
          }
          title={
            <Stack direction="row" spacing="tight" align="center">
              <Text weight="bold">Dubai SHJ</Text>
              <FlightDirect size="small" />
              <Text weight="bold">Cairo CAI</Text>
            </Stack>
          }
          actions={
            <Button type="secondary" size="small">
              See meals
            </Button>
          }
        />
      </Card>
    </Stack>
  </ModalSection>
  <ModalFooter>
    <Stack justify="end">
      <Button>Save meals</Button>
    </Stack>
  </ModalFooter>
</Modal>

Open on user action

Modals disrupt the main flow. If they come as a surprise, they’re more likely to be dismissed. Only open a modal after the user has taken an action so it’s clear why it was triggered.

Direct user with the title

A modal title sets the context for everything inside and also stays fixed at the top if the modal scrolls down.

So the title should make it clear what the modal relates to and what actions might be expected of the user. Keep it short and focused on either an action (verb) or a category (noun).

Save payment card
Activate your plan
Priority Boarding
Your payment card will be safe with us
Great! Your email has been verified. Now activate your plan.
All details about Priority Boarding

Allow users to close

Users want to feel in control of their actions. Since modals act as interruptions, they can invoke negative feelings in users. Make sure users feel in control by offering them a clear option to close the modal and get back to the main flow.

You should try to match user expectations for the given platform. Responsive and native modals should always include a close button in the footer.

Desktop modals should include a close button in the upper right and (unless you need an explicit close, such as for cookie consent) the option to close the modal by clicking the overlay. Optionally include a secondary button in the footer.

  # Mobile
A modal for mobile with a Save button and a Close button
A modal for mobile with a Save button but no other actions
  # Desktop
A modal for desktop with a Save button and a Close button
A modal for desktop with a Save button but no other actions

Related components

Dialog

Modals can hand lots of information with structure. For small bits of information focused on a single action, consider a dialog.

Popover

Modals interrupt the main user flow. If you have not too much information and don’t want to interrupt the main flow, use a popover. Popovers are also useful to present information that does not block other content on wide screens.