Source: https://monarchui.dev/components/separator/

Components · Layout

# Separator

Horizontal or vertical divider.

@rookcom/monarch-react

Component

## Horizontal

## 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

```tsx
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.

## Related components

- [Toolbar](https://monarchui.dev/components/toolbar/): Groups controls; separators can divide its groups.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | `@radix-ui/react-separator``react` |
| 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`

## All example code

### Horizontal

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

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