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";
() => (
  <Stack flex>
    <Stack spacing="XXSmall">
      <Heading as="h3" type="title3">
        Default
      </Heading>
      <Seat />
    </Stack>
    <Stack spacing="XXSmall">
      <Heading as="h3" type="title3">
        Extra legroom
      </Heading>
      <Seat type="legroom" />
    </Stack>
    <Stack spacing="XXSmall">
      <Heading as="h3" type="title3">
        Selected
      </Heading>
      <Seat type="selected" />
    </Stack>
    <Stack spacing="XXSmall">
      <Heading as="h3" type="title3">
        Unavailable
      </Heading>
      <Seat type="unavailable" />
    </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" />
        <Seat size="small" />
        <Seat size="small" />
      </Stack>
    </Stack>
    <Stack spacing="XXSmall">
      <Heading as="h3" type="title3">
        Medium
      </Heading>
      <Stack direction="row">
        <Seat />
        <Seat />
        <Seat />
        <Seat />
      </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 Heading from "@kiwicom/orbit-components/lib/Heading";
import Seat from "@kiwicom/orbit-components/lib/Seat";
import Stack from "@kiwicom/orbit-components/lib/Stack";
import Text from "@kiwicom/orbit-components/lib/Text";
() => (
  <Stack>
    <Heading>Select your seat</Heading>
    <Stack direction="row" align="center" spacing="XXLarge">
      <Stack
        spacing="XSmall"
        direction="row"
        inline
        grow={false}
        align="center"
      >
        <Seat /> <Text>Standard (€5)</Text>
      </Stack>
      <Stack
        spacing="XSmall"
        direction="row"
        inline
        grow={false}
        align="center"
      >
        <Seat type="legroom" /> <Text>Extra legroom (€10)</Text>
      </Stack>
      <Stack
        spacing="XSmall"
        direction="row"
        inline
        grow={false}
        align="center"
      >
        <Seat type="selected" /> <Text>Selected</Text>
      </Stack>
      <Stack
        spacing="XSmall"
        direction="row"
        inline
        grow={false}
        align="center"
      >
        <Seat type="unavailable" />
        <Text>Unavailable</Text>
      </Stack>
    </Stack>
    <Stack>
      <Stack direction="row" align="center">
        <Stack inline grow={false} align="center" direction="column">
          <Text>A</Text>
          <Seat type="selected" />
        </Stack>
        <Stack inline grow={false} align="center" direction="column">
          <Text>B</Text>
          <Seat />
        </Stack>
        <Stack inline grow={false} align="center" direction="column">
          <Text>C</Text>
          <Seat />
        </Stack>
        <Stack inline grow={false} align="center" direction="column">
          <Text> </Text>
          <Text> </Text>
          <Text>1</Text>
        </Stack>
        <Stack inline grow={false} align="center" direction="column">
          <Text>D</Text>
          <Seat />
        </Stack>
        <Stack inline grow={false} align="center" direction="column">
          <Text>E</Text>
          <Seat type="unavailable" />
        </Stack>
        <Stack inline grow={false} align="center" direction="column">
          <Text>F</Text>
          <Seat />
        </Stack>
      </Stack>
      <Stack direction="row" align="center">
        <Seat />
        <Seat />
        <Seat />
        <Text>2</Text>
        <Seat type="legroom" />
        <Seat type="legroom" />
        <Seat type="legroom" />
      </Stack>
    </Stack>
  </Stack>
)

Related components

Illustration

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