Divider

Horizontal divider
The Divider component allows users to render a line to divide content with.

Basic Usage

Loading view...

Component API

NameDescription
variant
"solid" | "dashed" | "dotted"
Divider borderStyle
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Sets height in horizontal orientation and width in vertical
label
React.ReactNode
Adds text after line in horizontal orientation
orientation
"horizontal" | "vertical"
Line orientation
labelPosition
"center" | "left" | "right"
Label position
labelProps
Record<string, any>
Props spread to Text component in label
color
"primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}`
Color of the divider.