Divider

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

Basic Usage

tsx
Copied
1
<Card>
2
<Text>Content above</Text>
3
</Card>
4
<Divider label="A divider" labelPosition="center" />
5
<Card>
6
<Text>Content below</Text>
7
</Card>

Component API

color
optional
Default
gray.2
"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.

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
Default
auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
label
optional
React.ReactNode

Adds text after line in horizontal orientation

labelPosition
optional
"center" | "left" | "right"

Label position

labelProps
optional
Record<string, any>

Props spread to Text component in label

orientation
optional
"horizontal" | "vertical"

Line orientation

size
optional
number | "xs" | "sm" | "md" | "lg" | "xl"

Sets height in horizontal orientation and width in vertical

variant
optional
"solid" | "dashed" | "dotted"

Divider borderStyle

width
optional
Default
auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.