Skip to content
Components

Separator

Visual rule dividing content sections, horizontally or vertically. Renders a Base UI Separator (role="separator"). Pass aria-hidden when the rule is purely decorative and should stay out of the accessibility tree.

Overview

Specifications

Availability

Usage

import { Separator, SeparatorVariant } from "@instruments/materia-ui/components/separator";

Best practices

  • It is announced as a separator by default - pass aria-hidden when the rule is purely decorative.

  • For an inline rule set orientation="vertical" and give it an explicit height (e.g. className="h-6") - a vertical separator has no intrinsic length.

Props

PropTypeDefaultDescription
variant"strong" | "default" | "muted" | "accent""default"

Visual weight of the separator line.

Also exports

  • typeSeparatorVariant

Composition

Used by

ButtonGroup, DataGrid, DataGridColumnFilter, DeliveryBanner, Item, MobileNavigationRoot, PageToolbar, Sidebar