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