A hairline that divides two groups of content, across a column (horizontal) or down a row (vertical), and tells a screen reader there is a break there.
When to use
Use Separator for a line where two groups of content meet and the layout doesn't already set them apart, such as between a vehicle's facts and its actions in a panel.
Kongens Nytorv
Metro M1, M2 and M3.
Props
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Joined after pn-Separator on the root |
style | CSSProperties | — | Reaches the root |
ref | Ref<HTMLDivElement> | — | Reaches the root, the role="separator" element |
classNamestring, default —- Joined after
pn-Separatoron the root styleCSSProperties, default —- Reaches the root
refRef<HTMLDivElement>, default —- Reaches the root, the
role="separator"element
Use it
import { Separator } from '@mylder/perron'Ask your agent
get_reference({ library: "base-ui", component: "Separator" })Keyboard and ARIA
From the Base UI reference for Separator and the installed Separator.js. "From" says who does it.
No keys: the separator is not focusable and does nothing (CR-6).
| Element | Role | Accessible name from | States announced |
|---|---|---|---|
root | separator, from Base UI | none: a separator that is not focusable needs no name | aria-orientation, from orientation, by Base UI |
What axe won't catch, from the contract, each with how this component meets it:
- Everything the eye is told, the ear is told, for every shape each prop accepts: the line the eye sees is the
separatorrole the ear is told, in both orientations, witharia-orientationsaying which. - Every landmark and named region has an accessible name: none here; a separator is neither.
- Every default label can be overridden: none here; Separator owns no strings.
- Every shape the type accepts renders, in every variant: both
orientationvalues draw the line on their side; Separator takes noReactNodeprop. - A hidden copy kept for animation is
aria-hidden, and a collapsed region isinert: none here; nothing animates or collapses. - Native semantics first: Base UI renders a
<div>with theseparatorrole, the role an<hr>gives natively, andrender={<hr />}stays open to a caller who wants the native element, drawn the same (CR-3); no other ARIA. - Focus moves in reading order and returns on close: the separator is never a tab stop, so Tab passes from the content before it to the content after it.
- Every target is at least
size.target-minsquare: none here; the separator is not a target. - Loops stop when the system asks for less motion: none here; nothing moves.
Owned strings
No owned strings: the separator shows and announces no words, only its role.
Do and don't
For a caller using the component, with the reason. Each row is a rule: a must row's Don't is never right, a should row's needs a reason, and Checked by says what catches the Don't in a caller's code.
| Rule | Level | Do | Don't | Checked by |
|---|---|---|---|---|
| DD-1 | should | Put a Separator where two groups of content meet and the layout doesn't already set them apart, such as between a vehicle's facts and its actions in a panel | Put one between every row of a list or after every paragraph: the interface around the map stays calm, and white space sets most things apart without a line | review |
| DD-2 | should | Space the line with its container's gap or padding, from the space.* scale | Give the separator a margin of its own: it adds to the container's gap, and two screens end up with two spacings | review |
| DD-3 | must | Put a vertical Separator in a flex row, and a horizontal one in a block or a flex column, so the line runs the container's length | Put a vertical one in block flow or a horizontal one in a flex row, where it has no length and draws nothing | review |
| DD-4 | must | Use ToolbarSeparator inside a Toolbar and MenuSeparator inside a Menu, and let Select draw its own between groups | Put a Separator in a toolbar, where it doesn't run across the bar, in a menu, where it isn't the menu's own part, or in a list, where a separator is not a listbox's child (CR-8) | review |
| DD-5 | must | Give a break that needs words a heading | Put text in the separator, or swap its role for none to hide it: a break the eye sees is one the ear is told | review |
| DD-6 | must | Draw a panel's or card's edge with its own border | Use a Separator as an element's edge: it announces a break between two groups, which an edge is not | review |