Divider

A divider is a thin line that separates content, such as the groups in a list or the sections of a card. Its inset decides whether the line separates whole sections, edge to edge, or the items inside one. The lines below are live, in all four insets.

Reference docs⁠

BlazorReactWebOverviewExamplesAPIStylingAccessibility

Choosing an inset⁠

Four insets set where the line starts and stops. Choose by what the line separates:

  • None: whole sections, edge to edge, such as the groups in a list or a menu.
  • Start: items inside one section, so the line begins past a leading icon or avatar.
  • End: items inside one section, so the line stops short of a trailing control.
  • Both: a line inside a card or a padded container, clear of both edges.

Built in⁠

  • It is not focusable and has no role, so it adds nothing for a keyboard or screen reader user to work through.
  • The divider fills its container's width and sits on its own row.
  • The line is 1 pixel thick, in the outline variant color, with no space above or below until you add some.
  • Four tokens set the line's thickness, color, and the space above and below it.

Using dividers well⁠

  • Add a divider only where it clarifies a grouping, and let whitespace and grouping do the rest.
  • Keep the content readable in order without the lines, because a divider reinforces a grouping and does not carry meaning.
  • Style the line with the divider's tokens.

These rules follow Material 3 Expressive's guidance for dividers, on material.io.

Inset⁠

inset takes one of four values: none, start, end, and both. Omit it and the divider runs the full width of its container. Each side the inset names shortens the line by 16 pixels. Choose between the insets in the Overview.

In a list⁠

A divider has no space above or below itself, and its width is the container's. Place it between the items it separates and let the surrounding layout supply any spacing. Here a full-width divider closes one group and an inset divider separates the items inside the next.

Properties⁠

PropertyAttributeTypeDescription
insetinsetnone, start, end, bothDividerInsetDividerInset.None, .Start, .End, .Bothdefault DividerInset.NoneIndents the divider at the start, the end or both, by a fixed 16px on each side named. The sides follow the writing direction. See Inset.

Props⁠

PropTypeDescription
insetDividerInsetTypeDividerInset.None, .Start, .End, .Bothdefault DividerInset.NoneIndents the divider at the start, the end or both, by a fixed 16px on each side named. The sides follow the writing direction. See Inset.

Parameters⁠

ParameterTypeDescription
InsetDividerInset?DividerInset.None, .Start, .End, .Bothdefault DividerInset.NoneIndents the divider at the start, the end or both, by a fixed 16px on each side named. The sides follow the writing direction. See Inset.

Inputs⁠

InputTypeDescription
insetDividerInsetTypeDividerInset.None, .Start, .End, .Bothdefault DividerInset.NoneIndents the divider at the start, the end or both, by a fixed 16px on each side named. The sides follow the writing direction. See Inset.

Props⁠

PropTypeDescription
insetDividerInsetTypeDividerInset.None, .Start, .End, .Bothdefault DividerInset.NoneIndents the divider at the start, the end or both, by a fixed 16px on each side named. The sides follow the writing direction. See Inset.

Props⁠

PropTypeDescription
insetDividerInsetTypeDividerInset.None, .Start, .End, .Bothdefault DividerInset.NoneIndents the divider at the start, the end or both, by a fixed 16px on each side named. The sides follow the writing direction. See Inset.

A value is what the token defaults to; selecting it copies the token's name.

Tokens⁠

TokenValue
--ct-divider-bottom-space0px --ct-divider-bottom-space
--ct-divider-color--ct-sys-color-outline-variant --ct-divider-color
--ct-divider-thickness1px --ct-divider-thickness
--ct-divider-top-space0px --ct-divider-top-space

Names and states⁠

The divider has no role and follows no WAI-ARIA Authoring Practices pattern, so a screen reader reads nothing for it.

  • It has no accessible name and needs none.
  • It reads no aria-* attribute.
  • It does not give the separator semantics of a native <hr>. Keep the content understandable in reading order without the line.
  • To announce a break between regions, structure the content with headings or landmarks, which a screen reader does announce.

Keyboard and focus⁠

Key Action
None The divider responds to no key.
  • The divider takes no tab stop and cannot be focused, so no focus ring is drawn.

Pointer and touch⁠

  • The divider has no pointer behavior and no touch target, so WCAG 2.5.8 (24 by 24 pixels) does not apply to it.

Display settings⁠

  • In forced colors, the line uses CanvasText, whatever color it has otherwise.
  • Nothing animates, so reduced motion changes nothing.
  • A right-to-left layout swaps the inset at each end of the line.

Standards⁠

With its defaults, the divider meets no WCAG 2.2 success criterion on its own. One depends on how you use it:

  • 1.3.1 Info and Relationships (A): state a grouping in the content's structure, such as a list or a heading, and use the line only to reinforce it.