Components
Divider
BetaA horizontal or vertical rule for separating content sections. Can include a centred label for contextual dividers like "or", "included" or section headings.
Bed and Breakfast — £1,299 pp
Half Board — £1,449 pp
All Inclusive — £1,699 pp
Purpose
The Divider creates a visual break between content sections without introducing new hierarchy. It is used to:
- Separate rows within a form or detail panel
- Split groups of links in a navigation list or footer column
- Create a labelled break in a flow — "or", "also included", "upgrade options"
- Provide a vertical separator between inline elements such as filter pills or nav items
It should not replace meaningful section headings. If a group of content needs a title as well as visual separation, add a heading above the content, not a labelled Divider.
Usage
Reach for Divider when two adjacent pieces of content need a lightweight visual break with no semantic weight of their own — a row separator, an "or" between two choices, a boundary between inline nav items. When the content genuinely needs its own identity or landmark (something a screen reader user should be able to jump to), use a heading and <section> instead of a labelled Divider.
Dividers typically appear inside detail panels, footer link columns, and inline metadata rows — never as a page-level structural element on their own.
Anatomy
- 1Rule — 1 px line in grey-200. Full width for horizontal; full height of its container for vertical.
- 2Label (optional) — Short centred text in text-xs text-grey-400. Flanked by two rule segments that flex to fill the remaining width.
Variants
Plain horizontal
The default — a simple 1 px grey-200 line.
With centred label
Use for "or" between two options, "included" between package components, or any two-column context where a brief centred label aids comprehension.
Vertical
Use orientation="vertical" to separate inline elements. Must be placed inside a flex container with items-stretch so it fills the full line height.
Best practices
Use Divider to separate equally-weighted items where a heading would be over-engineered.
A plain Divider between board basis options creates clear separation without adding a heading.
Place two Dividers adjacent to each other with no content between them.
Stacking Dividers with no content between them creates visual noise without semantic value.
Use the label variant only when the label adds genuine meaning to the separation.
'or' between two input methods (e.g. email and phone) clarifies that they are alternatives.
Use long labels. Keep Divider labels to 1-4 words.
A labelled Divider with a full sentence ('Choose one of the following options') is better served by a heading.
Use vertical Dividers in flex containers with items-stretch so they fill the correct height automatically.
Vertical Dividers in a flex row create a lightweight separator between meta items (flights, nights, board) with minimal visual weight.
Place vertical Dividers in block-flow contexts where no parent height is defined.
A vertical Divider outside a flex container collapses to zero height because it has no height reference.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction of the rule. Vertical Divider fills the height of its flex container. |
| label | string | — | Optional centred text label. Renders flanking rule segments on each side. Horizontal only. |
| className | string | — | Additional Tailwind classes on the root element. |
Accessibility
Semantic role
The horizontal Divider renders as <hr> (no label) or a <div role="separator"> (with label). Vertical Dividers use <div role="separator" aria-orientation="vertical">.
Screen readers announce <hr> as a thematic break between sections. In navigation lists, the separator role communicates a group boundary to assistive technology.
When not to use a Divider
If content sections need to be independently navigable by screen reader users, use <section> with a heading rather than a Divider. The Divider is purely presentational separation — it does not create a new landmark.
Keyboard interaction
The Divider is not interactive. It receives no focus and has no keyboard behaviour.
Related components
Divider is a low-level layout utility with no direct alternative — it's rarely swapped for another component. Where a Divider is being used to fake a section boundary, consider a heading and <section> instead (see When not to use a Divider above).