Divider

PublishedUpdated Sep 30, 2026

A divider is a thin line that groups content in lists and containers: between sections of a list, or between a card's body and its actions. Use one where spacing alone doesn't show the grouping. See the M3 divider guidelines.

Usage

Vanilla

import { createDivider } from 'mtrl';

const divider = createDivider();
document.body.append(divider.element);

Web Components

<m-divider></m-divider>

React

import { Divider } from 'mtrl/react';

export function Example() {
  return (
    <Divider />
  );
}

Vue

<script setup lang="ts">
import { MDivider } from 'mtrl/vue';
</script>

<template>
  <MDivider />
</template>

Svelte

<script lang="ts">
  import { Divider } from 'mtrl/svelte';
</script>

<Divider />

SolidJS

import { Divider } from 'mtrl/solid';

export function Example() {
  return (
    <Divider />
  );
}

Examples

Inset

inset starts the line 16px in, and middle-inset insets both ends by 16px. insetStart and insetEnd change the insets, here to line up with a list's text after a 40dp avatar.

Vanilla

import { createDivider } from 'mtrl';

const divider = createDivider({ variant: 'inset', insetStart: 72 });
document.body.append(divider.element);

Web Components

<m-divider variant="inset" inset-start="72"></m-divider>

React

import { Divider } from 'mtrl/react';

export function Example() {
  return (
    <Divider variant="inset" insetStart={72} />
  );
}

Vue

<script setup lang="ts">
import { MDivider } from 'mtrl/vue';
</script>

<template>
  <MDivider variant="inset" :inset-start="72" />
</template>

Svelte

<script lang="ts">
  import { Divider } from 'mtrl/svelte';
</script>

<Divider variant="inset" insetStart={72} />

SolidJS

import { Divider } from 'mtrl/solid';

export function Example() {
  return (
    <Divider variant="inset" insetStart={72} />
  );
}

Vertical

A vertical divider stretches with its flex or grid row, which needs a height of its own.

Vanilla

import { createDivider } from 'mtrl';

const divider = createDivider({
  orientation: 'vertical',
  variant: 'middle-inset',
  insetStart: 8,
  insetEnd: 8,
});
document.body.append(divider.element);

Web Components

<m-divider orientation="vertical" variant="middle-inset" inset-start="8" inset-end="8"></m-divider>

React

import { Divider } from 'mtrl/react';

export function Example() {
  return (
    <Divider orientation="vertical" variant="middle-inset" insetStart={8} insetEnd={8} />
  );
}

Vue

<script setup lang="ts">
import { MDivider } from 'mtrl/vue';
</script>

<template>
  <MDivider orientation="vertical" variant="middle-inset" :inset-start="8" :inset-end="8" />
</template>

Svelte

<script lang="ts">
  import { Divider } from 'mtrl/svelte';
</script>

<Divider orientation="vertical" variant="middle-inset" insetStart={8} insetEnd={8} />

SolidJS

import { Divider } from 'mtrl/solid';

export function Example() {
  return (
    <Divider orientation="vertical" variant="middle-inset" insetStart={8} insetEnd={8} />
  );
}

Thickness and color

An action changes the line: its thickness in pixels, and any CSS color. setColor('') goes back to the theme's color.

Vanilla

import { createDivider } from 'mtrl';

const divider = createDivider({ thickness: 1 });
document.body.append(divider.element);

function emphasize() {
  divider.setThickness(2);
  divider.setColor('var(--mtrl-sys-color-primary)');
}

Web Components

<m-divider thickness="1"></m-divider>

<script type="module">
  const divider = document.querySelector('m-divider');

  function emphasize() {
    divider.setAttribute('thickness', "2");
    divider.setAttribute('color', "var(--mtrl-sys-color-primary)");
  }
</script>

React

import { useState } from 'react';
import { Divider } from 'mtrl/react';

export function Example() {
  const [thickness, setThickness] = useState(1);
  const [color, setColor] = useState<string>();
  const emphasize = () => {
    setThickness(2);
    setColor("var(--mtrl-sys-color-primary)");
  };

  return (
    <Divider thickness={thickness} color={color} />
  );
}

Vue

<script setup lang="ts">
import { ref } from 'vue';
import { MDivider } from 'mtrl/vue';

const thickness = ref(1);
const color = ref<string>();

function emphasize() {
  thickness.value = 2;
  color.value = "var(--mtrl-sys-color-primary)";
}
</script>

<template>
  <MDivider :thickness="thickness" :color="color" />
</template>

Svelte

<script lang="ts">
  import { Divider } from 'mtrl/svelte';

  let thickness = $state(1);
  let color = $state<string>();

  function emphasize() {
    thickness = 2;
    color = "var(--mtrl-sys-color-primary)";
  }
</script>

<Divider thickness={thickness} color={color} />

SolidJS

import { createSignal } from 'solid-js';
import { Divider } from 'mtrl/solid';

export function Example() {
  const [thickness, setThickness] = createSignal(1);
  const [color, setColor] = createSignal<string>();
  const emphasize = () => {
    setThickness(2);
    setColor("var(--mtrl-sys-color-primary)");
  };

  return (
    <Divider thickness={thickness()} color={color()} />
  );
}

API

Options

Option	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The direction of the line
`variant`	`'full-width' \| 'inset' \| 'middle-inset'`	`'full-width'`	Which ends are inset
`insetStart`	`number`	`16`	The start inset in pixels, for the inset variants: the inline start when horizontal (right in a right-to-left page), the top when vertical
`insetEnd`	`number`	`0` for `inset`, `16` for `middle-inset`	The end inset in pixels, for the inset variants: the inline end when horizontal, the bottom when vertical
`thickness`	`number`	`1`	The line's thickness in pixels
`color`	`string`	`undefined`	Any CSS color; the theme's `outline-variant` without one
`class`	`string \| string[]`	`undefined`	Additional CSS classes
`prefix`	`string`	`'mtrl'`	Prefix for CSS class names

Methods

Method	Parameters	Returns	Description
`getOrientation()` / `setOrientation(orientation)`	`orientation: 'horizontal' \| 'vertical'`	`string` / `DividerComponent`	The orientation
`getVariant()` / `setVariant(variant)`	`variant: 'full-width' \| 'inset' \| 'middle-inset'`	`string` / `DividerComponent`	The variant
`setInset(insetStart?, insetEnd?)`	`insetStart?: number, insetEnd?: number`	`DividerComponent`	The insets; an omitted one is kept. They apply while the variant is an inset one
`setThickness(thickness)`	`thickness: number`	`DividerComponent`	The thickness in pixels
`setColor(color)`	`color: string`	`DividerComponent`	A CSS color; `''` goes back to the theme's
`destroy()`	none	`void`	Removes the divider

The web component's attributes are orientation, variant, inset-start, inset-end, thickness and color.

Accessibility

An <hr>, which is a separator to assistive tech; a vertical one has aria-orientation="vertical".
A divider is not focusable and has no name. Keep the spacing or headings that show the groups, so the line is not the only cue.

Styling

The thickness, the length and the insets are inline styles the divider writes; the color is its background-color.

.mtrl-divider { }
.mtrl-divider--horizontal, .mtrl-divider--vertical { }
.mtrl-divider--full-width, .mtrl-divider--inset, .mtrl-divider--middle-inset { }

Measurements

Attribute	Value
Thickness	1dp
Color	`outline-variant`
Inset	16dp