Divider

Horizontal or vertical separator for grouping content.

Introduction

Dividers separate related groups of content with a thin line. Use them between sections, list groups, or inline items in a toolbar.

When to use: Visually split blocks of content when whitespace alone is not enough hierarchy, or separate inline actions in a horizontal row.

Compared to similar components:

• List — Presents a continuous index of rows. Place a Divider between sections or groups when you need a stronger break than ListSection alone.
• Card — Groups related content in a surface. Use Divider inside a Card body to split subsections without nesting more Cards.
• Menu — Floating action panel. Dividers often sit between groups of menu items.

Use the framework selector in the site header to switch between React and Vue.

Import

import { Divider } from "@bridge-ui/vue/Components/Divider";

import { Divider } from "@bridge-ui/react/Components/Divider";

Basic usage

By default, Divider renders a full-width horizontal rule between stacked content.

Vertical

Set orientation="vertical" for a separator in a horizontal flex row. The parent needs a defined height (or stretchable siblings) so the vertical line can size correctly.

Colors

Use the color prop to convey semantic meaning. Available colors: primary, secondary, success, info, warning, error, and dark. The default is dark.

Customization

Fine-tune appearance with className (React) or class (Vue), and the classes prop to target the root element—for example, thickness or fill color.

Accessibility

• Divider sets role="separator" and aria-orientation to match the orientation prop.
• Prefer semantic structure (headings, list sections) over Dividers alone when separating meaning for assistive technology.
• Decorative spacing between unrelated regions may not need a Divider; whitespace is often enough.

Anatomy

Divider renders a single <hr> root:

<hr class="divider-root" role="separator" aria-orientation="horizontal" />

Related components

Card, List, Menu

API