Separator | Lime design system

Examples

A profile

Maya Lens

Spending and savings

24 transactions

12 friends

Before the total

Total $251.50

When to use it

7 rules

Should: Try 24px of space, then a surface, before a line.
Must: Put a vertical separator in a row with a set height. Because it is h-full, which resolves to nothing in a row with no height, so the line vanishes.
Never: Pass a label; write the word as text with a separator on each side. Because Separator has no label prop, so the word never renders.
Never: Put a separator between cards; each is already a grey surface. Because the gap between two grey cards already splits them, and the line adds a third edge.
Must: Pass decorative when markup already makes the split, so no separator role is announced. Because two lists already announce their ends, so a screen reader hears an extra separator.
Should: Use at most three separators in a panel; regroup with headings past that.
Must: Set only the length in className; keep the 1px thickness. Because a thicker or darker line competes with the content it was meant to group.

3 checks

: The default role is separator with aria-orientation; pass decorative for a purely visual line.
: A separator takes no focus or input.
: The line is a background fill; verify it in forced colors, which may drop it.

5 edge cases

2 props

1 token