divider

A divider is a thin line that separates two groups of content, where space alone doesn't make the break clear.

when to use

• To separate two groups of content in the same container, when space alone doesn't make the break clear.
• Vertically, between groups of short items in a row, such as counts, sizes and a timestamp.
• With a label on the line, for a quiet break in a long list: “older”, “archived”.

when to use something else

• To frame a region or mark its edge. Use the border of a box or a card. A divider is a break between things, not a box around them.
• For a section title. Use a heading. A label on the line isn't read as a heading, so people can't find it or jump to it (see accessibility).
• Between every item of a list. Space already separates the items: use the gap of a stack. A table draws the lines between its rows itself.

anatomy

1. Line. A hairline in a faint colour, or in a slightly stronger one for the heavier divider. A horizontal line runs the full width. A vertical line stretches to the height of its row, with a small minimum height.
2. Label (optional, horizontal lines only). A word or two in the middle of the line, with a little space on each side. It is small, slightly spaced-out monospace, dim and lowercase, and it never wraps onto a second line.

A divider brings no space of its own. The space around it comes from the gap of the stack or the row it sits in.

variants and states

The heavier divider is a little stronger than the standard one, and just as thin.

A label splits the line around a short word.

A vertical divider is a thin column. It stretches to the height of its row, so put it in a horizontal stack, or in another row that lays its items out side by side. It takes no label.

behaviour

• A divider does nothing when it is clicked, and the keyboard passes over it: tab skips it.

The keyboard map is on the divider's React page.

accessibility

• A screen reader announces a divider as a separator.
• A divider that only decorates, inside something whose structure is already clear, can be hidden from assistive technology, so it isn't announced.
• The line is a faint decoration on purpose, with a very low contrast against the background (see shape). So a divider must never be the only thing that tells two groups apart: space and headings carry the structure.

Today: most screen readers don't read a divider's label. The label sits inside the separator, and a separator's contents aren't read. If the words matter, give the divider the same words as its accessible name, or better, use a heading.

content

• A label is one or two lowercase words that name what follows: “older”, “archived”, “2023”.
• No punctuation, no sentences, and nothing people need to act on.

do and don't

related

• Stack: the gap that spaces a divider.
• Card: its header and footer come with their own lines.
• Heading: when the break needs a title.
• Shape: the hairlines, and what each one is for.

specs

• Spacing: no margin. The space around it comes from its parent's gap.
• Role: role="separator"; the unlabelled divider also sets aria-orientation. The label sits inside the separator and sets no aria-label: when the words matter, pass the same text as aria-label.
• Decoration only: aria-hidden="true" keeps a divider from being announced.
• Contrast: about 1.1:1 to 1.5:1 against the canvases, by design: the hairlines are decoration (see shape).
• Keyboard: no focus and no action; not in the tab order.