Divider

A semantic separator with role="separator". Supports horizontal and vertical orientation, border variant, custom color,size, and an optional label.

Default

Section A
Section B
<Stack gap="md">
  <div>Section A</div>
  <Divider />
  <div>Section B</div>
</Stack>

Variants

solid
dashed
dotted
<Divider variant="solid" label="solid" />
<Divider variant="dashed" label="dashed" />
<Divider variant="dotted" label="dotted" />

Label position

Left label
Center label
Right label
<Divider label="Left label" labelPosition="left" />
<Divider label="Center label" labelPosition="center" />
<Divider label="Right label" labelPosition="right" />

Size

size="xs"
size="sm"
size="md"
size="lg"
size="xl"
<Divider size="xs" />
<Divider size="sm" />
<Divider size="md" />
<Divider size="lg" />
<Divider size="xl" />

Color

violet
green
red
<Divider color="var(--dv-color-violet-filled)" label="violet" />
<Divider color="var(--dv-color-green-filled)" label="green" />
<Divider color="var(--dv-color-red-filled)" label="red" />

Vertical

Left
Middle
Right
<Group style="height: 80px;" align="center">
  <span>Left</span>
  <Divider orientation="vertical" />
  <span>Middle</span>
  <Divider orientation="vertical" variant="dashed" />
  <span>Right</span>
</Group>

Props

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Direction of the separator line
variant'solid' | 'dashed' | 'dotted''solid'Border style of the line
size'xs' | 'sm' | 'md' | 'lg' | 'xl' | number—Thickness of the line (number → px)
colorstring—Line color as a CSS value
labelchildren—Content displayed along the line
labelPosition'left' | 'center' | 'right''left'Horizontal position of the label