Skip to main content

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" />
</>

Props​