Separator

Anatomy

Import and assemble the component:

1import { Separator } from '@raystack/apsara'
2
3<Separator />

Usage

Which way the line runs, where its ends sit, and what color it takes.

Orientation

horizontal (the default) draws a full-width rule between stacked content. vertical draws a rule between items in a row, and needs a parent with a set height to draw against.

1<Flex direction="column" gap={5} style={{ width: "400px" }}>
2  <Text>Above</Text>
3  <Separator />
4  <Flex gap={5} align="center" style={{ height: "24px" }}>
5    <Text>Left</Text>
6    <Separator orientation="vertical" />
7    <Text>Right</Text>
8  </Flex>
9</Flex>

Variant

full (the default) runs the rule edge to edge. middle insets both ends from the container edges.

1<Flex direction="column" gap={9} align="center" style={{ width: "400px" }}>
2  <Separator variant="full" />
3  <Separator variant="middle" />
4</Flex>

Color

Three weights of line. primary is the default; drop to secondary or tertiary where the rule should separate without drawing attention.

1<Flex direction="column" gap={9} align="center" style={{ width: "400px" }}>
2  <Separator color="primary" />
3  <Separator color="secondary" />
4  <Separator color="tertiary" />
5</Flex>

API Reference

Renders a visual divider between content sections.

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

Accessibility

• Uses role="separator" and aria-orientation by default so the divider is announced and oriented correctly.
• Pass decorative when the separator is purely visual (for example between icons in a toolbar). It then renders with role="presentation" and aria-hidden="true" so assistive tech skips it.