Divider

Material Design 3 divider component for separating content in lists and layouts. Not intended to replace spacing or heading hierarchy as the primary grouping mechanism.

Basic Usage

A thin line that groups content in lists and layouts. Default is a full-width horizontal divider that creates lightweight visual separation without introducing new containers.

Content above

Content below

<ds-divider></ds-divider>

Variants

Full-Width (Default)

Extends the full width of its container.

Content above

Content below

<ds-divider variant="full-width"></ds-divider>

Inset

Inset from the start edge (16px by default).

Content above

Content below

<ds-divider variant="inset"></ds-divider>

Middle

Inset from both edges (16px by default).

Content above

Content below

<ds-divider variant="middle"></ds-divider>

Horizontal (Default)

Horizontal divider for separating content vertically.

Content above

Content below

<ds-divider orientation="horizontal"></ds-divider>

Vertical

Vertical divider for separating content horizontally.

Item 1 Item 2 Item 3 
<ds-divider orientation="vertical"></ds-divider>

Advanced Usage

Custom Color

Apply custom colors to dividers.

Content above

Content below

<ds-divider color="#ff5722"></ds-divider>

Custom Thickness

Adjust the thickness of the divider line.

Content above

Content below

<ds-divider thickness="3px"></ds-divider>

Combined Customization

Combine multiple properties for custom styling.

Content above

Content below

<ds-divider variant="middle" color="#2196f3" thickness="2px"></ds-divider>

In Lists

Dividers commonly separate items in lists.

Item 1
Item 2
Item 3
Item 4

Interactive Demo

Experiment with divider properties.

Content above divider
Content below divider
Current attributes:
variant="full-width"
orientation="horizontal"

API

Attributes

Attribute Type Default Description
variant String "full-width" Divider variant: "full-width", "inset", or "middle"
orientation String "horizontal" Orientation: "horizontal" or "vertical"
color String - Custom color (CSS color value)
thickness String - Custom thickness (CSS length value)

CSS Custom Properties

Property Default Description
--ds-divider-color var(--md-sys-color-outline-variant) Color of the divider line
--ds-divider-thickness 1px Thickness of the divider line
--ds-divider-inset 16px Inset spacing for inset variant
--ds-divider-middle-inset 16px Spacing for middle variant (both sides)

CSS Parts

Part Description
divider The divider line element (hr)

Accessibility

  • ✅ Uses semantic <hr> element
  • ✅ Has role="separator" for screen readers
  • ✅ Non-interactive - does not receive focus
  • ✅ Properly separates content for assistive technologies
  • ✅ Works with high contrast mode

Usage Guidelines

  • When to use: Use dividers to separate related content groups in lists, forms, and dense panels.
  • When not to use: Avoid using dividers as a substitute for spacing, headings, or semantic grouping alone.
  • Composition: Match orientation and inset variant to surrounding layout rhythm and reading direction.
  • Common mistakes: Overusing dividers creates visual noise and weakens hierarchy.