Divider

Horizontal line with optional label or vertical divider

Import

Source

View source code

Docs

Edit this page

Package

@asuikit/core

Usage

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

import { Divider } from '@asuikit/core';

function Demo() {
  return (
    <>
      <Divider my="sm" />
      <Divider my="sm" variant="dashed" />
      <Divider my="sm" 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

import { Divider, Box } from '@asuikit/core';
import { IconSearch } from '@tabler/icons-react';

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:

import { Divider } from '@asuikit/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

import React from 'react';
import { Divider, Group, Text } from '@asuikit/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>
  );
}

Go back

Collapse – @asuikit/core

Up next

FocusTrap – @asuikit/core

Divider component props

Name	Type	Description
color	MantineColor	Key of theme.colors, defaults to "gray" in light color scheme and to "dark" in dark color scheme
label	ReactNode	Text inside the divider, only applicable when orientation="horizontal"
labelPosition	"left" \| "right" \| "center"	Label position, only applicable when orientation="horizontal"
labelProps	Record<string, any>	Props added to the label element
orientation	"horizontal" \| "vertical"	Divider orientation
size	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Sets height when orientation="horizontal" and width when orientation="vertical"
variant	Variants<"dashed" \| "dotted" \| "solid">	Controls appearance