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

Seat

Presents options for seating.

Seats present information about options for where to sit. The visually distinct types let users scan their options and make a comfortable selection.

Component status

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

Content structure

Type: optionally adds additional information about a seat option.

Seat types

Seat types present clear options for quick scanning. This allows users to find the option that fits them best.

import Heading from "@kiwicom/orbit-components/lib/Heading";
import Seat from "@kiwicom/orbit-components/lib/Seat";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import useMediaQuery from "@kiwicom/orbit-components/lib/useMediaQuery";
() => {
  const { isTablet } = useMediaQuery()
  return (
    <Stack flex>
      <Stack spacing="XXSmall">
        <Heading as="h3" type="title3">
          Default
        </Heading>
        <Seat size={isTablet ? "medium" : "small"} />
      </Stack>
      <Stack spacing="XXSmall">
        <Heading as="h3" type="title3">
          Extra legroom
        </Heading>
        <Seat type="legroom" size={isTablet ? "medium" : "small"} />
      </Stack>
      <Stack spacing="XXSmall">
        <Heading as="h3" type="title3">
          Selected
        </Heading>
        <Seat type="legroom" selected size={isTablet ? "medium" : "small"} />
      </Stack>
      <Stack spacing="XXSmall">
        <Heading as="h3" type="title3">
          Unavailable
        </Heading>
        <Seat type="unavailable" size={isTablet ? "medium" : "small"} />
      </Stack>
    </Stack>
  )
}

You can also present seats in two sizes.

import Heading from "@kiwicom/orbit-components/lib/Heading";
import Seat from "@kiwicom/orbit-components/lib/Seat";
import Stack from "@kiwicom/orbit-components/lib/Stack";
() => (
  <Stack>
    <Stack spacing="XXSmall">
      <Heading as="h3" type="title3">
        Small
      </Heading>
      <Stack direction="row">
        <Seat size="small" />
        <Seat size="small" selected />
        <Seat size="small" type="legroom" />
        <Seat size="small" type="unavailable" />
      </Stack>
    </Stack>
    <Stack spacing="XXSmall">
      <Heading as="h3" type="title3">
        Medium
      </Heading>
      <Stack direction="row">
        <Seat />
        <Seat selected />
        <Seat type="legroom" />
        <Seat type="unavailable" />
      </Stack>
    </Stack>
  </Stack>
)

Guidelines       

Explain the types

While the visual cues available for each seat type should help users understand their options, some users might not understand it at first glance. Provide a clear legend explaining each type so users can scan for what they want.

import Seat from "@kiwicom/orbit-components/lib/Seat";
import SeatLegend from "@kiwicom/orbit-components/lib/SeatLegend";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import useMediaQuery from "@kiwicom/orbit-components/lib/useMediaQuery";
() => {
  const { isTablet } = useMediaQuery()
  return (
    <Stack direction="column">
      <Stack inline>
        <Seat size={isTablet ? "medium" : "small"} />
        <Seat size={isTablet ? "medium" : "small"} type="legroom" />
        <Seat size={isTablet ? "medium" : "small"} type="unavailable" />
      </Stack>
      <Stack direction="column">
        <SeatLegend label="Extra legroom ($ 5.99 – $ 12.98)" />
        <SeatLegend type="legroom" label="Standard ($ 5.99 – $ 12.98)" />
        <SeatLegend type="unavailable" label="Unavailable" />
      </Stack>
    </Stack>
  )
}

Related components

Illustration

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