Skip to main content
react-md

Divider

Dividers group and separate content within lists and page layouts. The divider is a thin rule, lightweight yet sufficient to distinguish content visually and spatially.

Simple Divider

Create a divider using the Divider component.

import { Divider } from "@react-md/core/divider/Divider";
import { type ReactElement } from "react";

export default function SimpleDivider(): ReactElement {
  return <Divider />;
}

Press Enter to start editing.

Customizing Divider

The color can be configured by the core.$divider-light-theme-color / core.$divider-dark-theme-color / core.$divider-color Sass variables or the --rmd-divider-color custom property. The default behavior will be to use the correct light or dark theme color.

The height can be configured by the core.$divider-size Sass variable or using the core.divider-set-var(size, NEW_SIZE) mixin.

The spacing around the divider can be configured by the core.$divider-spacing Sass variable or using the core.divider-set-var(spacing, NEW_SIZE) mixin.

Here is some text to separate.

Second paragraph of text.

import { Divider } from "@react-md/core/divider/Divider";
import { TextContainer } from "@react-md/core/typography/TextContainer";
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

import styles from "./CustomizingDivider.module.scss";

export default function CustomizingDivider(): ReactElement {
  return (
    <TextContainer className={styles.container}>
      <Typography>Here is some text to separate.</Typography>
      <Divider />
      <Typography>Second paragraph of text.</Typography>
    </TextContainer>
  );
}

Press Enter to start editing.

@use "everything";

.container {
  // these two are the default values
  @include everything.divider-set-var(size, everything.$divider-size);
  @include everything.divider-set-var(spacing, everything.$divider-spacing);

  @include everything.divider-set-var(color, everything.$orange-300);
}

Press Enter to start editing.

Inset Divider

Enable the inset prop to apply additional margin-left so it is inset with a list of items. The inset amount can be configured by the core.$divider-inset Sass variable or using the core.divider-set-var(inset, NEW_VALUE) mixin.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
import { Divider } from "@react-md/core/divider/Divider";
import { List } from "@react-md/core/list/List";
import { ListItem } from "@react-md/core/list/ListItem";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

import styles from "./InsetDivider.module.scss";

export default function InsetDivider(): ReactElement {
  return (
    <List className={styles.list}>
      <ListItem leftAddon={<FavoriteIcon />}>Item 1</ListItem>
      <Divider />
      <ListItem leftAddon={<FavoriteIcon />}>Item 2</ListItem>
      <ListItem leftAddon={<FavoriteIcon />}>Item 3</ListItem>
      <Divider inset />
      <ListItem leftAddon={<FavoriteIcon />}>Item 4</ListItem>
      <ListItem leftAddon={<FavoriteIcon />}>Item 5</ListItem>
      <ListItem leftAddon={<FavoriteIcon />}>Item 6</ListItem>
    </List>
  );
}

Press Enter to start editing.

@use "everything";

.list {
  // @include everything.divider-set-var(inset, 4rem);

  max-width: 30rem;
  width: 100%;
}

Press Enter to start editing.

Vertical Divider

A divider can be rendered vertically instead of horizontally by enabling the vertical prop.

The height will be set to 100% but can be configured by setting the height through CSS or applying a new max-size using the core.divider-set-var(max-size, NEW_SIZE) mixin.

The width will be set to core.$divider-size but can be configured by setting the width through CSS or applying a new size using the core.divider-set-var(size, NEW_SIZE) mixin.

The margin can be configured by the core.$divider-vertical-spacing Sass variable or using the core.divider-set-var(vertical-spacing, NEW_SIZE) mixin.

Title
import { AppBar } from "@react-md/core/app-bar/AppBar";
import { AppBarTitle } from "@react-md/core/app-bar/AppBarTitle";
import { Divider } from "@react-md/core/divider/Divider";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

import styles from "./VerticalDivider.module.scss";

export default function VerticalDividerExample(): ReactElement {
  return (
    <AppBar theme="surface" className={styles.container}>
      <FavoriteIcon />
      <Divider vertical />
      <AppBarTitle>Title</AppBarTitle>
    </AppBar>
  );
}

Press Enter to start editing.

@use "everything";

.container {
  // just to show the defaults
  @include everything.divider-set-var(
    vertical-spacing,
    everything.$divider-vertical-spacing
  );
  @include everything.divider-set-var(max-size, everything.$divider-max-size);
}

Press Enter to start editing.