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:

import { Divider } from '@mantine/core';
function Demo() {
return (
<>
<Divider my="sm" />
<Divider my="sm" variant="dashed" />
<Divider my="sm" 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):

import { Divider, Box } from '@mantine/core';
import { IconSearch } from '@tabler/icons';
function Demo() {
return (
<>
<Divider my="xs" label="Label on the left" />
<Divider my="xs" label="Label in the center" labelPosition="center" />
<Divider my="xs" label="Label on the right" labelPosition="right" />
<Divider
my="xs"
variant="dashed"
labelPosition="center"
label={
<>
<IconSearch size={12} />
<Box ml={5}>Search results</Box>
</>
}
/>
<Divider
my="xs"
label="Link label"
labelProps={{ component: 'a', href: 'https://mantine.dev', variant: 'link', color: 'blue' }}
/>
</>
);
}

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:

import { Divider } from '@mantine/core';
function Demo() {
return (
<>
<Divider size="xs" />
<Divider size="sm" />
<Divider size="md" />
<Divider size="lg" />
<Divider size="xl" />
<Divider size={10} />
</>
);
}

Vertical orientation

Divider can be oriented vertically with orientation prop. In this case size will change the divider width:

Label
Label
Label
Label
Label
Label
import React from 'react';
import { Divider, Group, Text } from '@mantine/core';
function Demo() {
return (
<Group>
<Text>Label</Text>
<Divider orientation="vertical" />
<Text>Label</Text>
<Divider size="sm" orientation="vertical" />
<Text>Label</Text>
<Divider size="md" orientation="vertical" />
<Text>Label</Text>
<Divider size="lg" orientation="vertical" />
<Text>Label</Text>
<Divider size="xl" orientation="vertical" />
<Text>Label</Text>
</Group>
);
}
Download more icon variants from https://tabler-icons.io/i/search

Divider component props

NameTypeDescription
color
MantineColor
Line color from theme, defaults to gray in light color scheme and to dark in dark color scheme
label
ReactNode
Adds text after line in horizontal orientation
labelPosition
"left" | "right" | "center"
Label position
labelProps
Record<string, any>
Props spread to Text component in label
orientation
"horizontal" | "vertical"
Line orientation
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Sets height in horizontal orientation and width in vertical
variant
"dashed" | "dotted" | "solid"
Divider borderStyle

Divider component Styles API

NameStatic selectorDescription
label.mantine-Divider-labelLabel element, horizontal orientation only