Separator

Anatomy

Import and assemble the component:

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

Usage

Which way the line runs, how thick it is, 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
2  gap={11}
3  align="center"
4  justify="center"
5  style={{ width: "400px", height: "150px" }}
6>
7  <Separator size="half" />
8  <Separator orientation="vertical" />
9</Flex>

Size

size sets how far the rule runs across its container: small a short accent, half halfway, full (the default) edge to edge.

1<Flex direction="column" gap={9} align="center" style={{ width: "400px" }}>
2  <Separator size="small" />
3  <Separator size="half" />
4  <Separator size="full" />
5</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.