Divider

Dividers come in two variants. A horizontal divider is the default, drawing a line between stacked sections of content. A vertical divider draws a line between items placed side by side, such as a sidebar and the page content next to it.

When to use

• Use a divider to separate unrelated content within the same container, for example distinct sections in a list or groups of menu items.
• Use a divider to clarify visual hierarchy when spacing alone isn’t enough to show a boundary, for example in dense tables or settings panels.
• Use a divider to group related items so users can scan content faster, for example separating a “Danger zone” section from standard settings.
• Use a divider to structure layouts like sidebars, lists, or toolbars, where a lightweight line helps orient the eye without adding a full border or container.

When not to use

• Don’t use a divider as a substitute for spacing. If more margin or padding alone communicates separation, skip the divider. It only adds visual noise.
• Don’t use a divider as a decorative element. A divider communicates structure, not a styling accent.
• Don’t use a divider inside blocks that are already visually distinct, such as cards, tiles, or modals. The container already provides separation.
• Don’t use a divider to fix layout or alignment issues. Fix the layout instead of covering it with a line.

Presentation

The default divider uses the design system ornament color and standard vertical spacing. Reach for a shorter or more prominent separator only when the content genuinely needs it, rather than adding a second separator pattern.