Divider
Horizontal rule with a text label, composed from Separator and Text. Used for section breaks with optional emphasis on the label.
Usage
import { Divider } from "@reva/ui";<Divider>Label</Divider>Examples
Label position
Use labelPosition to place the label at the start, center, or end of the row (logical start/end for RTL).
Label
Label
Label
<VStack gap={8} className="w-full max-w-md"> <Divider labelPosition="start">Label</Divider> <Divider labelPosition="center">Label</Divider> <Divider labelPosition="end">Label</Divider></VStack>Props
| Prop | Type | Default |
|---|---|---|
children | React.ReactNode | — |
labelPosition | "start" | "center" | "end" | "center" |
Divider extends HStack props (gap, className, etc.). Default gap is 4 (16px between label and line segments). Typography uses brand serif italic and text-fg-muted for the label.