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

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

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

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

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