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";

(): React.Node => {
  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";

(): React.Node => (
  <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";

(): React.Node => {
  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.