Design System
v4.9.5
⌘K

Divider

Jump to Props

Dividers are lines placed either horizontally or vertically that separate blocks of content.

On this page

Import

import { Divider } from "@vitality-ds/components";

Usage

Use dividers in a subtle way to separate content into groups, sections, or items. Many times, negative space will accomplish the same goal, so use them sparingly, as excessive use might feel overwhelming.

Aim For
  • Use divider when whitespace is not enough of a separator.
  • Use in lists, separate items to show they are individual and unrelated items when each item is long and otherwise difficult to scan.
Avoid
  • For surrounding an item, use a border.

Direction

There are two types of dividers: horizontal and vertical. By default, the direction value is horizontal.

() => {
  const DividerContainer = styled("div", {
    height: "100px",
    width: "100%",
  });
  return (
    <DividerContainer>
      <Typography>An item to be divided</Typography>
      <Divider />
      <Typography>Another item to be divided</Typography>
    </DividerContainer>
  );
};

() => {
  const DividerContainer = styled("div", {
    height: "100px",
  });
  return (
    <DividerContainer>
      <Divider direction="vertical" />
    </DividerContainer>
  );
};

Color

By default, the color value is neutral. The other color option, onPrimaryBackground is only to be used on a primary background.

() => {
  const DividerContainer = styled("div", {
    height: "100px",
    width: "100%",
  });
  return (
    <DividerContainer>
      <Typography>An item to be divided</Typography>
      <Divider size="lg" />
      <Typography>An item to be divided</Typography>
      <Divider size="lg" color="onPrimaryBackground" />
      <Typography>Another item to be divided</Typography>
    </DividerContainer>
  );
};

Spacing

This property is to provide the spacing around the divider. Horizontal divider will add spacing on the top and bottom of the divider. Vertical divider will add spacing on the left and right of the divider. By default, the spacing value is none.

() => {
  const DividerContainer = styled("div", {
    height: "100px",
    width: "100%",
  });
  return (
    <DividerContainer>
      <Typography>An item to be divided</Typography>
      <Divider />
      <Typography>Another item to be divided</Typography>
      <Divider spacing="sm" />
      <Typography>Another item to be divided</Typography>
      <Divider spacing="md" />
      <Typography>Another item to be divided</Typography>
      <Divider spacing="lg" />
      <Typography>Another item to be divided</Typography>
    </DividerContainer>
  );
};

Size

This property is to provide the thickness of divider. By default, the size value is sm.

() => {
  const DividerContainer = styled("div", {
    height: "100px",
    width: "100%",
  });
  return (
    <DividerContainer>
      <Typography>An item to be divided</Typography>
      <Divider />
      <Typography>Another item to be divided</Typography>
      <Divider size="md" />
      <Typography>Another item to be divided</Typography>
      <Divider size="lg" />
    </DividerContainer>
  );
};

Figma Library

Figma.logo

Props

color

Description

Use this prop to change the colour when the divider is being used on a primary background

Type

("neutral" | "onPrimaryBackground"

Default Value

neutral

direction

Description

The direction of the divider

Type

("horizontal" | "vertical"

Default Value

horizontal

ref

Type

Ref<HTMLHRElement>

size

Description

This prop determines the thickness of the divider

Type

("sm" | "md" | "lg"

Default Value

sm

spacing

Description

This prop determines the spacing around the divider

Type

("sm" | "md" | "lg" | "none"

Default Value

none

© 2025