Separator

v1.0.0 | View in Storybook

​

When to use

• When used appropriately, Separators can provide visual relief and help the user identify related areas making it easier to focus on the task at hand.

​

When to use something else

• Sparse layouts: prefer whitespace over a line.
• When grouping needs semantics or stronger hierarchy: use headings, Card, or background regions—not only a Separator.

​

Dos and don’ts

• Do use 16px long vertical Separators when needing to separate button or horizontally laid out form elements.
• Don’t use Separators between every element. Instead, group related content together and use the Separator to separate categories or dissimilar content.
• Don’t overuse Separators as they can clutter the interface and reduce readability, making it hard to understand related and unrelated content.
• Don’t use Separators when white space can achieve the same effect.
• Don’t make Separators bold or a different color. They should be subtle.

​

Placement & alignment

• Full-bleed Separators are mostly used in layout elements, forms, lists, and expandable primitives. Common usage is within side panels.
• Separators used in side panel extend completely to both left and right edges. This prevents too much clutter by competing with the outline input form styling.
• Inset Separators separate related content, similar to sub-bullets in a bullet list and do not extend edge to edge, but instead appear to float within their container.

​

Behavior

• Non-interactive line; conveys visual structure only. Do not rely on it for accessible grouping—use headings and landmarks where needed.

​

Often used with

Toolbar, Card header/footer, Accordion stacks, dense form sections—always with semantic headings where grouping matters for accessibility.

​

Visual examples

The examples below are interactive and follow the doc site’s theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

​

Vertical

Use a vertical separator to divide inline controls in a horizontal row—for example, between toolbar buttons or form fields laid out side by side.

​

All orientations

Compare horizontal and vertical separators to choose the orientation that best fits the layout—horizontal for stacked sections, vertical for inline groups.

​

In navigation

Use separators in navigation to divide related link groups without adding visual weight—for example, between primary and secondary menu items.

​

In card

Place a separator between card header, body, and footer regions to create clear visual hierarchy without relying on heavy borders or background changes.

​

With text

Use a separator with centered text to label a break between sections—for example, “or” between sign-in options or a category name between list groups.

​

In list

Use inset separators between list items to separate rows without full-bleed lines, keeping dense lists readable and visually organized.

​

Custom style

Adjust separator styling sparingly to match a specific layout context, but keep lines subtle so they support structure without competing with content.

​

Accessibility

Use semantic headings and landmarks alongside separators for accessible grouping—separators alone do not convey structure to assistive technologies.