Divider

Horizontal line with optional label or vertical divider
Import

Usage

Divider component renders horizontal or vertical line. Customize hr border style by setting variant prop:

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

With label

In horizontal orientation you can add label with any react node at left, right or center of Divider by setting label and control its appearance with labelPosition and labelProps (see Text component for full props reference):

Label on the left
Label in the center
Label on the right
Search results
<Divider margins="xs" label="Label on the left" />
<Divider margins="xs" label="Label in the center" labelPosition="center" />
<Divider margins="xs" label="Label on the right" labelPosition="right" />
<Divider
margins="xs"
variant="dashed"
labelPosition="center"
label={
<>
<MagnifyingGlassIcon style={{ width: 12, height: 12 }} />
<span style={{ marginLeft: 5 }}>Search results</span>
</>
}
/>
<Divider
margins="xs"
label="Link label"
labelProps={{ component: 'a', href: 'https://mantine.dev', variant: 'link', color: 'blue' }}
/>

Vertical orientation and margins

Set margin prop to add margins on left and right sides in vertical orientation and top and bottom in horizontal:

Badge
Badge
Badge
<Group position="center">
<Badge>Badge</Badge>
<Divider orientation="vertical" margins="sm" />
<Badge>Badge</Badge>
<Divider orientation="vertical" margins="sm" />
<Badge>Badge</Badge>
</Group>

Sizes

Divider has predefined sizes: xs, sm, md, lg, xl. You can pass size as number and it will be set as height in px:

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

You can get predefined sizes by importing DIVIDER_SIZES:

import { DIVIDER_SIZES } from '@mantine/core';
Prop valueHeight or width
xs1px
sm2px
md3px
lg4px
xl5px
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback