Separator

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

Usage

The Separator component creates a separation between content sections.

import { Separator } from '@raystack/apsara/v1'
 
<Separator />
 
<Separator size="half" />
 
<Separator orientation="vertical" size="small" />

Separator Props

Prop	Type	Default
`size`	`"small" \| "half" \| "full"`	`"full"`
`color`	`"primary" \| "secondary" \| "tertiary"`	`"primary"`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`className`	`string`	-

Examples

Color

The Separator component supports three colors.

<Flex direction="column" gap="large" align="center" style={{ width: "400px" }}>
  <Separator color="primary" />
  <Separator color="secondary" />
  <Separator color="tertiary" />
</Flex>

Size

The Separator component supports three sizes.

<Flex direction="column" gap="large" align="center" style={{ width: "400px" }}>
  <Separator size="small" />
  <Separator size="half" />
  <Separator size="full" />
</Flex>

Orientation

Separator can be rendered in both horizontal and vertical orientations.

<Flex
  gap="extra-large"
  align="center"
  justify="center"
  style={{ width: "400px", height: "150px" }}
>
  <Separator size="half" />
  <Separator orientation="vertical" />
</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