Prepared Docs

Separator wraps Radix Separator with Prepared color variants. Defaults to decorative so the line is hidden from assistive tech; set decorative={false} when the rule conveys structural meaning.

Props

Name	Type	Default	Description
`className`	`string`	—	Additional CSS class name applied to the separator element.
`color`	`SeparatorColor`	`SeparatorColor.Base`	Color variant for the separator.
`decorative`	`boolean`	`true`	When true, the separator is presentational only and hidden from the accessibility tree.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Direction of the separator line.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Default

Orientations

Colors

In context

Separator / Usage

Separator / Accessibility

Props

Name	Type	Default	Description
`className`	`string`	—	Additional CSS class name applied to the separator element.
`color`	`SeparatorColor`	`SeparatorColor.Base`	Color variant for the separator.
`decorative`	`boolean`	`true`	When true, the separator is presentational only and hidden from the accessibility tree.
`orientation`	`"horizontal" \| "vertical"`	`horizontal`	Direction of the separator line.