Divider
The
Divider
component allows users to render a line to divide content with.Basic Usage
Basic Usage
tsxCopied1<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
Component API
color
optional
Default
gray.2
Color of the divider.
grow
optional
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
label
optional
Adds text after line in horizontal orientation
labelPosition
optional
Label position
labelProps
optional
Props spread to Text component in label
orientation
optional
Line orientation
size
optional
Sets height in horizontal orientation and width in vertical
variant
optional
Divider borderStyle
width
optional
Default
auto