v3.6.14
Discord
Source code

Divider

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

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
Link label
<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={
    <>
      <MagnifyingGlassIcon style={{ width: 12, height: 12 }} />
      <span style={{ marginLeft: 5, marginRight: 5 }}>Search results</span>
    </>
  }
/>


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

<Divider size="xs" />
<Divider size="sm" />
<Divider size="md" />
<Divider size="lg" />
<Divider size="xl" />
<Divider size={10} />
Go back
Collapse – @mantine/core
Up next
Paper – @mantine/core
Build fully functional accessible web applications faster than ever
Project
Contribute to MantineMedia assetsChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGitHub discussions
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
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter