Divider
A thematic separator: a native hr when bare, and a labeled role=separator element when it wraps a centered text label.
Import
import { Divider } from "@hyzer-labs/ui"Demo
With no children, Divider renders a native <hr>.
Round one
Round two
<Divider />With children, Divider renders a labeled role="separator" row: the classic "OR" pattern between two sign-in options.
Sign in with league account
Sign in as a guest
<Divider>OR</Divider><Divider variant="solid">Continue with</Divider><Divider variant="dashed">Continue with</Divider><Divider variant="dotted">Continue with</Divider>spacing drives the block margin around the divider. It takes the shared
layout scale, including the near/away density distances, which
tighten inside data-density-shift regions.
Above
Below
<Divider spacing="none" />Above
Below
<Divider spacing="sm" />Above
Below
<Divider />Above
Below
<Divider spacing="lg" />Above
Below
<Divider spacing="near" />Above
Below
<Divider spacing="away" />lineWidth maps straight onto the library's border-width tokens: thin (1px) and thick (2px).
Front nine
Back nine
<Divider />Front nine
Back nine
<Divider lineWidth="thick" />Props
| Name | Type | Default | Note |
|---|---|---|---|
children | Snippet | — (label) | Optional. Absent → bare <hr>; present → the labeled form. |
variant | 'solid' | 'dashed' | 'dotted' | 'solid' | |
spacing | LayoutPadding | 'md' | Block margin: 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' — the shared layout scale; near/away tighten inside data-density-shift regions. |
lineWidth | 'thin' | 'thick' | 'thin' | Maps 1:1 to the --hz-border-width-thin/-thick tokens. |
class | string | — | Merged after the hz-divider class. |
Theme hooks
What this component promises your CSS. The reference theme styles exactly these — from @layer hz-theme, so your unlayered rules win. See Styling Components for the how.
Root class: .hz-divider
Data attributes
| Hook | Values | Styles |
|---|---|---|
data-variant | 'solid' | 'dashed' | 'dotted' | Line style. Default solid. |
data-spacing | 'none' | 'sm' | 'md' | 'lg' | 'near' | 'away' | Block margin from the space scale. near and away are the density distances, so dividers respond to a density shift like the layout family. Default md. |
data-line-width | 'thin' | 'thick' | 1:1 with --hz-border-width-thin/-thick. |
data-labeled | present on the labeled form | The labeled form is a div with rules; the plain form is a bare hr. The theme tells them apart by element (hr.hz-divider vs div.hz-divider), so match that if you restyle. |
Part classes
| Hook | Values | Styles |
|---|---|---|
.hz-divider-label | child element | The label. Its flanking lines are ::before/::after, so they are not separately targetable. |
Accessibility
The bare form is a native <hr>: implicit role="separator", horizontal, non-focusable, and needing no ARIA.
The labeled form keeps role="separator" on the wrapping <div>, so the thematic break survives the switch away from <hr>. The label text is the separator's accessible name and stays in the tree, so screen readers announce a separator followed by its label, though the exact wording varies by reader.
The flanking rules are decorative ::before/::after pseudo-elements, never part of the accessibility tree.
References: MDN: <hr> · MDN: separator role