Divider

containment

Dividers are thin lines that group content in lists and containers, or separate content into sections.

Variants

Full Width

Default

Divider spanning the full container width

Inset

Divider with start margin aligned to content

Middle Inset

Divider with margins on both sides

Properties

Name Type Required Default Description
inset boolean - - Indent the divider with start padding
insetStart boolean - - Indent the divider from the start
insetEnd boolean - - Indent the divider from the end

Accessibility

Role: separator
Screen Reader Notes: Use role="separator" for semantic dividers. Use role="none" for purely decorative dividers.

LLM Context

Intent: Visually separate content into sections
Anti-Patterns:
  • Overusing dividers between every item
  • Dividers as primary visual structure
  • Missing role="separator" in interactive contexts
Example Usage: 
<md-divider></md-divider>
<md-divider inset></md-divider>
<md-divider inset-start inset-end></md-divider>