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

Designing

Released

n/a

n/a

Released
Content structure

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.