Divider

Updated: Sep 24, 2026

Divider is a thin rounded rule that separates two logically distinct sections of content. It is purely decorative: it renders a single element marked aria-hidden, so it is never announced and never reachable.

Use Divider when a design pattern calls for a visible break between genuinely distinct sections. Prefer a container’s material and spacing when grouping content; adjacent list rows already provide their own structure.

Usage

import {
  Divider,
  DividerOrientation,
  TextStyle,
  TextView,
} from '@wearables-ui-toolkit/mrbd';

function AudioSection() {
  return (
    <div className="section">
      <TextView textStyle={TextStyle.HEADING2}>Audio</TextView>
      <Divider />
      <TextView textStyle={TextStyle.BODY2}>Output and balance</TextView>
    </div>
  );
}

function StatBar() {
  return (
    <div className="statBar">
      <TextView textStyle={TextStyle.META2}>84%</TextView>
      <Divider orientation={DividerOrientation.VERTICAL} />
      <TextView textStyle={TextStyle.META2}>12 GB free</TextView>
    </div>
  );
}

Give the divider room with spacing tokens rather than margins baked into the component:

.section {
  display: flex;
  flex-direction: column;
  gap: var(--uit-spacing-medium);
}

/* A vertical divider stretches to the row height, so the row needs one. */
.statBar {
  display: flex;
  align-items: stretch;
  gap: var(--uit-spacing-small);
}

Props

The full prop type is DividerProps. It extends HTMLAttributes<HTMLDivElement>, so the standard div attributes — including title and data-* — are forwarded to the rendered element, and the component forwards its ref there too.

Prop	Type	Default	Description
`orientation`	`DividerOrientation`	`DividerOrientation.HORIZONTAL`	Which axis the rule runs along.
`className`	`string`	`''`	Extra class on the element, appended after the component’s own class.
`style`	`CSSProperties`	`{}`	Inline styles. Merged after the component’s own geometry, so it can override the computed size — reserve it for placement.

Types and enums

DividerOrientation

Member	Result
`HORIZONTAL`	Fills the available width at a fixed thickness. The default.
`VERTICAL`	Fills the available height at a fixed thickness.

Behavior

Sizing. The component writes its own width, height, and corner radius inline. A horizontal divider fills the available width and keeps a fixed thickness; a vertical divider does the reverse. Because a vertical divider fills its container’s height, the container needs a resolved height — in a flex row, align-items: stretch is enough.
Overrides.style is merged after that computed geometry, so style= shortens a horizontal rule. Use it for placement only; the thickness, color, and rounded ends are the component’s to set.
Appearance. The rule is painted with --uit-color-border-primary and has rounded ends. It never shrinks when its flex container runs out of room, so a crowded row squeezes the content rather than the separator.
No state. The component has no focus, hover, press, or disabled behavior and no motion. It is not an interactable and never takes focus. Treat it as an empty element: anything placed inside it inherits the rule’s fixed thickness and is hidden from assistive technology.

Accessibility

Divider always sets aria-hidden on itself — the component applies it last, so it cannot be turned off through props — and supplies nothing else. It has no role, no name, and no place in the accessibility tree.

If a break carries meaning — a new group of settings, a new day in a log — express that meaning with a heading or a labelled region, not with the rule alone. A ContainerHeader at the top of each group says far more than a line between them.

Recommended patterns

Use a divider to separate sections that are genuinely distinct.
Control the surrounding space with semantic spacing tokens on the parent.
Give a vertical divider’s parent a resolved height, or stretch it in a flex row, so the rule has a height to fill.
Use ButtonDivider for logical groups inside an action row.

Avoid

Keep rows in VerticalList directly adjacent rather than inserting a divider between each row.
Use headings, regions, containers, and spacing for structure; a divider is a decorative visual break, not a container edge.
Preserve the component-owned thickness, color, and radius for consistency.
Divider is always hidden from assistive technology. A role, label, or child cannot make it announce content, so express meaning with a heading or region.

ButtonDivider, ListItem, VerticalList, Container