Design System Beacon

Divider

Dividers are used to visually separate content into distinct sections. Use dividers to organize and structure your interface.

Overview

The Divider component provides a visual separation between content sections. It supports both horizontal and vertical orientations, and can optionally include a slot for icons or other content.

All divider styles are built using design tokens, ensuring consistency across themes and hues. Use the interactive playground below to explore all available combinations.

Interactive Playground

Use the controls to customize the divider and see how it looks in real-time. Toggle between themes and hues to see how dividers adapt to different contexts.

Orientation

Slot Position

Color

Width

Theme

<Divider />

Anatomy

A divider consists of a line that can optionally include a slot for additional content.

Line--border-neutral-secondary

Slot (Optional)Icon or custom content

Variants & States

Dividers come in different orientations and can include optional slots for additional content.

Horizontal

Use horizontal dividers to separate content vertically stacked sections.

Vertical

Use vertical dividers to separate content in horizontal layouts.

With Slot

Add a slot to include icons or other content within the divider.

Slot Positions

Position the slot at different locations: center, left, right, top, or bottom.

For a complete matrix of all divider variants, see the Divider component in Figma.

Usage Guidelines

Use dividers to separate distinct content sections.
Use horizontal dividers in vertical layouts.
Use vertical dividers in horizontal layouts.
Add slots when you need to include icons or labels.
Maintain consistent spacing around dividers.
Use dividers sparingly to avoid visual clutter.

Don't

Don't use dividers as decorative elements only.
Don't overuse dividers - use spacing when possible.
Don't mix divider orientations inconsistently.
Don't place dividers too close to content.
Don't use dividers to separate closely related content.
Don't forget to consider accessibility when using dividers.

Accessibility

Dividers are decorative elements and should not be announced by screen readers.
Use appropriate ARIA attributes if dividers have interactive elements.
Ensure sufficient visual contrast for dividers to be visible.
Consider using semantic HTML elements when dividers separate major sections.

API Reference

Divider component props and types.

DividerProps

interface DividerProps {
  orientation?: "horizontal" | "vertical";
  slot?: boolean;
  slotPosition?: "default" | "center" | "left" | "right" | "top" | "bottom";
  slotContent?: React.ReactNode;
  color?: string;
  width?: string | "100%";
}

Props

orientation

"horizontal" | "vertical"

"horizontal"

Divider orientation. Horizontal dividers separate vertical content, vertical dividers separate horizontal content.

slot

boolean

false

Whether to show a slot for icons or custom content within the divider.

slotPosition

"default"

Position of the slot within the divider. For horizontal dividers: left, center, right. For vertical dividers: top, center, bottom.

slotContent

React.ReactNode

—

Custom content to display in the slot. If not provided, defaults to ArrowDownFallSlotIcon.

color

string

"var(--border-neutral-secondary)"

Custom color for the divider line. Can be a CSS variable, hex color, or any valid CSS color value.

width

string | "100%"

"100%"

Width of the divider (for horizontal) or height (for vertical). Can be a percentage, pixel value, or any valid CSS dimension.

Usage Examples

Copyable code snippets for common divider use cases.

Basic Divider

import { Divider } from 'beacon-ui';

<Divider />

Vertical Divider

import { Divider } from 'beacon-ui';

<Divider orientation="vertical" />

Divider with Slot

import { Divider } from 'beacon-ui';

<Divider slot slotPosition="center" />

Slot Positions

import { Divider } from 'beacon-ui';

<Divider slot slotPosition="left" />
<Divider slot slotPosition="center" />
<Divider slot slotPosition="right" />