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="legroom" 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="unavailable" />
        <Text>Unavailable</Text>
      </Stack>
    </Stack>
    <Stack>
      <Stack direction="row" align="center">
        <Stack inline grow={false} align="center" direction="column">
          <Text>A</Text>
        </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.