Divider
LayoutHorizontal or vertical rule with optional label.
Thin separator line. Horizontal by default; use orientation="vertical" for inline dividers in flex rows. Optional label prop renders centered text on the line.
Usage
import { Divider } from "nosible-ux"
export default function Example() {
return <Divider />
}Examples
Label and variants
Macro signals
Corporate signals
Vertical in a row
EarningsGuidanceMacro
Accessibility
Renders <hr> (horizontal) or <div role="separator"> (vertical). Purely decorative — no interactive meaning.
Props
| Name | Type | Default | Description |
|---|---|---|---|
color | string | undefined | undefined (uses border-border token) | Custom color for the line. |
label | ReactNode | — | Optional text label split on the line. Only renders in horizontal orientation. |
labelPosition | "center" | "left" | "right" | undefined | "center" | Alignment of the label along the line. |
orientation | "horizontal" | "vertical" | undefined | "horizontal" | Axis of the divider line. |
size | number | undefined | 1 | Thickness of the line in pixels. |
variant | "solid" | "dashed" | "dotted" | undefined | "solid" | Border style of the line. |