Dividers

Dividers are visual rules that separate content. They help establish hierarchy and clarify the organization of a page by grouping related information.

Introduction

The MD3 Expressive Divider is a subtle yet powerful layout component. It supports various inset styles to align with different content types, and introduces an Expressive Wavy variant that adds a touch of brand identity and fluid motion to otherwise static page separators.

Anatomy

• Line: The visual separator, either flat or wavy.
• Insets: Controlled spacing at the start or end of the line to align with content like text or icons.

Variants

Layout Variants

• Full-bleed (Default): Spans the entire width of the container.
• Inset: Adds a leading margin (typically 16dp or 72dp) to align with text while leaving icons or avatars outside.
• Middle-inset: Adds margins to both the start and end of the divider.
• Subheader: Positioned specifically above a subheader label.

Expressive Shapes

• Flat (Default): A clean, standard horizontal or vertical line.
• Wavy: A fluid, sinusoidal path that adds a modern, organic feel to the layout. Wavy dividers support spring-based entry animations.

Features

Orientation

Supports both Horizontal and Vertical orientations. Vertical dividers are useful for separating items in a row (e.g., in a toolbar).

Customizable Waves

For the wavy variant, you can customize the amplitude and wavelength to match your design's specific aesthetic.

Usage

Basic Divider

import { Divider } from "@bug-on/m3-expressive";

<Divider />

Inset Divider in a List

<div className="flex flex-col">
  <ListItem label="Item 1" />
  <Divider variant="inset" insetStart="icon" />
  <ListItem label="Item 2" />
</div>

Wavy Divider

<Divider shape="wavy" />

Best Practices

Do

• Use dividers to clarify the structure of complex pages or long lists.
• Use Inset dividers to separate list items without breaking the visual alignment of leading icons/avatars.
• Use Wavy dividers sparingly to add visual interest to key sections of the interface.
• Ensure vertical dividers have sufficient height to clearly separate items.

Don't

• Don't use too many dividers; whitespace is often a more effective way to separate content.
• Don't use a divider if the separation is already clear from the layout or background colors.
• Avoid using Wavy dividers in very dense or purely functional areas where they might be distracting.

Accessibility

• Roles: Automatically applies role="separator".
• States: Uses aria-orientation to communicate the direction.
• Decorative: Use the decorative prop for dividers that don't provide semantic structure, setting aria-hidden="true".
• Motion: Animations respect prefers-reduced-motion settings.

API Reference

Divider