Display
Separator
A rule, in the three weights a monochrome page needs.
When to reach for it
Hairline between rows, edge between blocks, hard under a masthead.
Examples
weights
Notes
A rule.
In a monochrome system the rule does the work colour would otherwise do, so it has three weights rather than one: hairline between rows, edge between blocks, hard under a masthead. Picking by name keeps a page from drifting into five hand-tuned greys.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| decorative | boolean | true | A rule that only groups things visually is decoration and must not be announced. Set `false` when the rule genuinely separates two sections a screen reader should hear as distinct. |
| orientation | 'horizontal' | 'vertical' | 'horizontal' | — |
| weight | 'hairline' | 'edge' | 'hard' | 'hairline' | `hairline` divides rows inside one block; `edge` divides one block from the next. |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
Accessibility
- role="none" by default. A rule that only groups things visually must not be announced.