Divider

Display horizontal line with optional label or vertical divider

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

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

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

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

Link label

<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

<div
  style={{
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
  }}
>
  <Badge>Badge</Badge>
  <Divider margins="md" orientation="vertical" />
  <Badge>Badge</Badge>
  <Divider margins="md" orientation="vertical" />
  <Badge>Badge</Badge>
</div>

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 value	Height or width
xs	1px
sm	2px
md	3px
lg	4px
xl	5px

Divider

Usage

With label

Vertical orientation and margins

Sizes