Layout & Display
Horizontal or vertical rule, with an optional inline label.
6 props across 3 groups
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Optional inline label; renders the line in two segments around it. |
children
ReactNode
Default: —
Optional inline label; renders the line in two segments around it.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | horizontal | Line direction. |
variant | "fullWidth" | "inset" | "middle" | fullWidth | Inset behavior at the line's ends. |
lineStyle | "solid" | "dashed" | "dotted" | solid | Line style. |
color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | string | default | Line color. |
colorDepth | 50 | 100 | ... | 950 | 300 | Shade depth for the selected color. |
thickness | number | string | — | Line thickness override. |
orientation
"horizontal" | "vertical"
Default: horizontal
Line direction.
variant
"fullWidth" | "inset" | "middle"
Default: fullWidth
Inset behavior at the line's ends.
lineStyle
"solid" | "dashed" | "dotted"
Default: solid
Line style.
color
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | string
Default: default
Line color.
colorDepth
50 | 100 | ... | 950
Default: 300
Shade depth for the selected color.
thickness
number | string
Default: —
Line thickness override.
| Prop | Type | Default | Description |
|---|---|---|---|
labelPlacement | "start" | "center" | "end" | center | Where a label renders along the line, when children are provided. |
labelPlacement
"start" | "center" | "end"
Default: center
Where a label renders along the line, when children are provided.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Class applied to the root element. |
className
string
Default: —
Class applied to the root element.
