Divider

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

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.