Divider
Divider renders a horizontal or vertical separator line. It supports solid, dashed, and dotted styles, and can include a label.
Basic Usage
import { Divider } from "@paramanu/primitives-react"
export default function App() {return <Divider />}<hr class="pm-divider pm-divider--horizontal pm-divider--solid" />With Label
OR
import { Divider } from "@paramanu/primitives-react"
export default function App() {return <Divider label="OR" />}<div class="pm-divider pm-divider--horizontal pm-divider--solid pm-divider--with-label" role="separator">OR</div>Accessibility
Divider renders with role="separator" and aria-orientation attributes.
React Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Direction |
variant | "solid" | "dashed" | "dotted" | "solid" | Line style |
label | ReactNode | — | Label text |
labelPosition | "start" | "center" | "end" | "center" | Label placement |
my | SpacingScale | — | Vertical margin |
CSS Classes
| Class | Purpose |
|---|---|
pm-divider | Base |
pm-divider--horizontal | Horizontal |
pm-divider--vertical | Vertical |
pm-divider--solid | Solid line |
pm-divider--dashed | Dashed line |
pm-divider--dotted | Dotted line |
pm-divider--with-label | Has label |