Mushilu-San UI Divider
A thin line that separates sections of content, optionally with a label.
Selector: mui-divider
import { Divider } from '@mushilu-san/ui/primitives';Loading example…
Overview
role="separator", so screen readers announce a boundary between sections. Its orientation is exposed as aria-orientation.
When to use
Separating groups of items in a menu, list or form. Splitting two alternatives, such as "or" between sign-in options.
When not to use
Creating space between elements. Use Spacer or a Stack gap. Marking a new section title. Use a heading.
Examples
Vertical and styles
Loading example…
Guidelines
Do
Use one divider per boundary. Keep the number of separators low.
Don't
Do not stack two dividers with nothing between them. Do not rely on the label alone to say what a section is, if a screen reader user needs it. Add a heading.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
host | separator | aria-orientation follows orientation. |
label | — | aria-hidden="true". |
A divider is not focusable and has no keyboard behaviour.
API
Divider
| Name | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Whether the line is horizontal or vertical. Default `horizontal`. |
variant | 'solid' | 'dashed' | 'dotted' | 'solid' | Line style: `solid`, `dashed` or `dotted`. Default `solid`. |
label | string | undefined | — | Optional text drawn in the middle of a horizontal divider. |
CSS parts
::part(root)
Tokens
--mui-color-border--mui-color-text-muted--mui-space-2