SGDS Divider Component Skill

<sgds-divider> renders a separator line to visually group or divide adjacent content. Use it instead of a native <hr> whenever SGDS consistent styling is needed.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Which orientation?

• Separates stacked rows of content → horizontal (default)
• Separates side-by-side columns → vertical

Vertical dividers require an explicit height on the parent container. Without one, a vertical divider collapses to zero height.