Separator

Horizontal

Profile

Security

import { Separator } from '@rookcom/monarch-react';

<p>Profile</p>
<Separator />
<p>Security</p>

Usage examples

The example at the top of the page is the only one for this component.

Purpose

A thin visual divider between groups of content.

Use when

Separating groups inside a toolbar, menu or panel.

Avoid when

Separating page sections that need headings: use headings and spacing.

Design principles

Decorative by default; set decorative={false} only when the division is meaningful to screen-reader users.

API reference

import { Separator } from '@rookcom/monarch-react';

Export	Kind	Rendering	Root class
`Separator`	component	server-safe	`.mn-separator`

Built on @radix-ui/react-separator; the ref is forwarded.

Generated from the TypeScript declarations of packages/react/src/components/layout/separator.

Properties

`Separator`

Visual divider. `decorative` (default) hides it from assistive technology.

Prop	Type	Description
`asChild`	`boolean`
`children`	`ReactNode`
`className`	`string`
`id`	`string`

Variants

Prop	Values	Description
`orientation`	`'horizontal''vertical'`	Default `horizontal`. Exposed as `data-orientation`.
`decorative`	`'true''false'`	Default `true` (no separator role).

States

State	Exposed as	Behaviour
Static	–	No interactive states.

Interaction behaviour

None.

Keyboard support

Not interactive, so there is no keyboard behaviour.

Accessibility

Role: none when decorative; separator otherwise
Accessible name: –

Decorative separators are hidden from assistive technology (Radix).

Responsive behaviour

Horizontal separators fill the width; vertical ones fill the height of their container.

Theme support

Colour is a Monarch border token.

Do and don't

Do

Keep separators decorative unless the grouping matters to screen-reader users.

Don't

Do not stack separators to create spacing.

Toolbar: Groups controls; separators can divide its groups.

Dependencies

Kind	Depends on
npm packages	`@radix-ui/react-separatorreact`
Monarch components	None

Testing coverage

Is decorative by default and a separator when decorative={false}.

Check	Covered
Axe in jsdom	Yes
Server rendering	Yes
Browser suites	None yet

Tests: packages/react/src/components/layout/separator