Divider
stable 0.4 kB<hk-divider>A rule that can carry a label. Horizontal or vertical, and decorative by default so it does not clutter the accessibility tree.
#separator
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction. |
| label | string | '' | Centred text that breaks the rule. |
| decorative | boolean | true | Hides it from assistive tech. Set false when it separates real sections. |
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-divider-color | #e2e8f0 | Rule colour. |
| --hk-divider-thickness | 1px | Rule thickness. |
Accessibility
- Decorative by default with aria-hidden; opt into role="separator" when the split is meaningful.
- A labelled divider keeps its text readable rather than hiding it behind the line.