Separator
A thin horizontal or vertical dividing line, optionally broken up by a short text label like "OR".
Installation
npx dafink-ui add separatorDemo
OR
Item
OR
ItemProps
| Name | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | "vertical" renders a full-height line for use inside a flex row (e.g. between toolbar buttons). |
| labelPosition | 'start' | 'center' | 'end' | 'center' | Where the label sits along the line's own axis: left-to-right when horizontal, top-to-bottom when vertical. Only applies when children is set. |
| variant | 'solid' | 'dashed' | 'dotted' | 'solid' | Border style of the line. Applies to every line segment, including both sides of a labeled separator. |
| children | ReactNode | - | Optional text that breaks up the line, in either orientation (e.g. "OR"). Stays upright (not rotated) when orientation="vertical". |
| className | string | "" | Additional classes applied to the root element. |