Separator

Edit

Duplicate

Delete

Separator draws a hairline between sections. By default it's decorative (hidden from screen readers); mark it non-decorative when the divide carries meaning.

Usage

import { Separator } from "@sina-design-system/core";

<Separator />
<Separator orientation="vertical" />

Examples

Horizontal · between two blocks

First section

Second section

Vertical · between inline items

Edit

Duplicate

Delete

Semantic · decorative={false} exposes role="separator"

Above the boundary

Below the boundary

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Divider direction.
`decorative`	`boolean`	`true`	When false, exposes a separator role to assistive tech.

Accessibility

Decorative separators are hidden from assistive tech. With decorative={false} the divider exposes role="separator" as a real section boundary.