Separator
A 1px --mrd-line hairline that divides content. Reach for spacing or a surface change first; use a separator when neither is enough.
Account
Profile, email and password.
<Text weight="medium" tone="ink">Account</Text>
<Separator />
<Text size="sm">Profile, email and password.</Text>Import
import { Separator } from "@merid/react";Examples
Vertical
orientation="vertical" draws a vertical line that stretches to its flex container's height.
<Stack direction="row" gap={3} align="center">
<Text size="sm" as="span">Docs</Text>
<Separator orientation="vertical" />
<Text size="sm" as="span">Changelog</Text>
<Separator orientation="vertical" />
<Text size="sm" as="span">GitHub</Text>
</Stack>Semantic separator
By default the line is decorative (role="none"). Set decorative={false} when it divides meaningful groups, so it is exposed as role="separator".
Recent files
Shared with you
<Text size="sm">Recent files</Text>
<Separator decorative={false} />
<Text size="sm">Shared with you</Text>API reference
Renders a div; forwards its ref and passes native attributes through.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Direction of the hairline. |
decorative | boolean | true | When true the line is purely visual (role="none"). Set false to expose role="separator". |
Styling
| Hook | Values |
|---|---|
.mrd-separator | Root <div> |
data-orientation | horizontal · vertical |
Separator has no component variables; its colour is --mrd-line. Add spacing with margin on the separator or gap on the parent.
Accessibility
- Decorative separators are removed from the accessibility tree.
- With
decorative={false}, the element hasrole="separator", and vertical separators also getaria-orientation="vertical".
Guidelines
Do
Separate groups with whitespace or a tray surface first, and keep separators for dense lists and toolbars.
Avoid
Stack separators between every paragraph or make them thicker or darker than 1px --mrd-line.