Separator

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

Usage

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

Separator Props

Prop

Type

Examples

Color

The Separator component supports three colors.

1<Flex direction="column" gap="large" 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="large" 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="extra-large"
3  align="center"
4  justify="center"
5  style={{ width: "400px", height: "150px" }}
6>
7  <Separator size="half" />
8  <Separator orientation="vertical" />
9</Flex>

Accessibility

The Separator component follows accessibility best practices:

  • Uses role="separator" by default
  • Is marked as decorative for visual separation
  • Maintains proper color contrast
  • Supports proper semantic structure in both orientations