Divider

The Divider component provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy.

Line Styles

Result

Loading...

Live Editor

<>
	<Divider className="mb-2" />
	<Divider className="mb-2" lineStyle="dashed" />
</>

Label Styles

The useBadge prop will render the label as a Badge component.

Result

Loading...

Live Editor

<>
	<Divider className="mb-2" />
	<Divider className="mb-2" label="Label" />
	<Divider className="mb-2" label="Use Badge" useBadge />
</>

Variants

Result

Loading...

Live Editor

<>
	<Divider className="mb-2" label="Primary" variant="primary" />
	<Divider className="mb-2" label="Secondary" variant="secondary" />
	<Divider className="mb-2" label="Success" variant="success" />
	<Divider className="mb-2" label="Danger" variant="danger" />
	<Divider className="mb-2" label="Warning" variant="warning" />
	<Divider className="mb-2" label="Info" variant="info" />
	<Divider className="mb-2" label="Light" variant="light" />
	<Divider className="mb-2" label="Dark" variant="dark" />
</>

Label Placements

Result

Loading...

Live Editor

<>
	<Divider className="mb-2" label="Left" labelPlacement="left" />
	<Divider className="mb-2" label="Center" labelPlacement="center" />
	<Divider className="mb-2" label="Right" labelPlacement="right" />
</>

Thickness

Result

Loading...

Live Editor

<>
	<Divider className="mb-2" thickness="sm" />
	<Divider className="mb-2" thickness="md" />
	<Divider className="mb-2" thickness="lg" />
	<Divider className="mb-2" thickness="xl" />

	<Divider className="mb-2" label="Small Thickness" thickness="sm" />
	<Divider className="mb-2" label="Medium Thickness" thickness="md" />
	<Divider className="mb-2" label="Large Thickness" thickness="lg" />
	<Divider className="mb-2" label="Extra Large Thickness" thickness="xl" />

	<Divider className="mb-2" label="Dashed Small Thickness" lineStyle="dashed" thickness="sm" />
	<Divider className="mb-2" label="Dashed Medium Thickness" lineStyle="dashed" thickness="md" />
	<Divider className="mb-2" label="Dashed Large Thickness" lineStyle="dashed" thickness="lg" />
	<Divider
		className="mb-2"
		label="Dashed Extra Large Thickness"
		lineStyle="dashed"
		thickness="xl"
	/>

	<Divider className="mb-2" label="Primary" variant="primary" thickness="lg" />
	<Divider className="mb-2" label="Secondary" variant="secondary" thickness="lg" />
	<Divider className="mb-2" label="Success" variant="success" thickness="lg" />
	<Divider className="mb-2" label="Danger" variant="danger" thickness="lg" />
	<Divider className="mb-2" label="Warning" variant="warning" thickness="lg" />
	<Divider className="mb-2" label="Info" variant="info" thickness="lg" />
	<Divider className="mb-2" label="Light" variant="light" thickness="lg" />
	<Divider className="mb-2" label="Dark" variant="dark" thickness="lg" />
</>

Props