Separator

A visual divider that separates content with support for vertical and horizontal orientations.

Anatomy

Import and assemble the component:

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

3<Separator />

API Reference

Renders a visual divider between content sections.

Prop

Type

Examples

Color

The Separator component supports three colors.

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>

Size

The Separator component supports three sizes.

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>

Orientation

Separator can be rendered in both horizontal and vertical orientations.

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>

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.