Skip to main content
Urbicon UI
source

Separator

Visual divider for separating content sections with horizontal and vertical orientations.

Content above

Content below

Loading syntax highlighting...

01 Examples

Inline Vertical Separator

Vertical separators as dividers between navigation items — a classic breadcrumb pattern.
Loading syntax highlighting...

Settings Card

Separators structuring a realistic settings panel — as a section divider and between in-list rows.

Account

Manage your profile and preferences

J

Jane Doe

jane@example.com

Language English
Timezone UTC+1
Loading syntax highlighting...

02 Customization

Separator with Label

A common pattern: text centered over a horizontal rule — typical for 'OR continue with' auth flows.
or continue with
Chapter 2
Loading syntax highlighting...

03 Accessibility

ARIA Roles

By default, decorative={true} renders role="none" so screen readers skip the element entirely. Set decorative={false} to use role="separator" with aria-orientation, announcing it as a meaningful content boundary.

When to use semantic mode

Use decorative={false} when the separator marks a thematic shift — e.g. between unrelated content sections. Keep the default for purely visual spacing between related items.

HTML Semantics

Renders as a <div> rather than <hr> for full ARIA control. The role and aria-orientation attributes are set automatically based on the decorative and orientation props.

04 API Reference

9 props
9 props

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...
llm.txt