Open this component in Storybook
The <dsgn-divider> component renders a horizontal rule (<hr>) that separates
content sections. It draws a one-pixel line in the semantic outline color and
adds symmetric vertical spacing above and below.
Usage
<dsgn-divider></dsgn-divider>Import the component module in your application entrypoint:
import '@ds-gn/ui/divider';Props
| Prop | Type | Default | Description |
|---|---|---|---|
| spacing | 'sm' | 'md' | 'lg' | 'md' | Vertical spacing above and below the rule. |
| surface | 'light' | 'dark' | 'light' | Semantic token surface to use. |
The divider has one line style. There is no variant prop — dashed and dotted
rules are not supported.
Slots
The divider renders an <hr> and takes no slotted content.
Examples
Spacing
<dsgn-divider spacing="sm"></dsgn-divider>
<dsgn-divider spacing="md"></dsgn-divider>
<dsgn-divider spacing="lg"></dsgn-divider>Between sections
<dsgn-text>Section one content.</dsgn-text>
<dsgn-divider spacing="lg"></dsgn-divider>
<dsgn-text>Section two content.</dsgn-text>On a dark surface
<dsgn-divider surface="dark"></dsgn-divider>Accessibility
The rendered <hr> carries the native separator semantics, so assistive
technology announces the section break without any extra attributes. Use a
divider for a real content break — for decorative spacing, use the gap prop on
<dsgn-stack> or <dsgn-grid> instead.