ComponentsDisplayDivider

Divider

Line separator for content sections. 7 line styles, 6 colors, label, icon, inset and chat date variants.

7 styles6 colorsLabelIconInsetChat dateVertical

Overview

Line separator for content sections. 7 line styles, 6 colors, label, icon, inset and chat date variants.

Labeled dividers

Live preview

A short label can clarify the relationship between the content groups on either side.

DividerExample.tsx
tsx
<Divider label="OR" />
<Divider label="Continue with" />
<Divider label="Left aligned" labelAlign="left" />
<Divider label="Right aligned" labelAlign="right" />

Use a divider only when spacing and headings are not enough to communicate a change in content grouping.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose Divider when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

Line styles

Live preview

7 styles — solid, dashed, dotted, thick, gradient-fade, gradient, double

Solid

Dashed

Dotted

Thick

Gradient fade

Gradient

Double

App.tsx
tsx
import { Divider } from 'omverse-ui'
 
<Divider lineStyle="solid" />
<Divider lineStyle="dashed" />
<Divider lineStyle="dotted" />
<Divider lineStyle="thick" />
<Divider lineStyle="gradient-fade" />
<Divider lineStyle="gradient" />
<Divider lineStyle="double" />

Colors

Live preview

6 semantic colors — default, primary, secondary, success, warning, error

default

primary

secondary

success

warning

error

App.tsx
tsx
<Divider lineStyle="thick" color="default" />
<Divider lineStyle="thick" color="primary" />
<Divider lineStyle="thick" color="secondary" />
<Divider lineStyle="thick" color="success" />
<Divider lineStyle="thick" color="warning" />
<Divider lineStyle="thick" color="error" />

With label

Live preview

label prop places text inside the line — center (default), left or right aligned

App.tsx
tsx
<Divider label="OR" />
<Divider label="Continue with" />
<Divider label="Left aligned" labelAlign="left" />
<Divider label="Right aligned" labelAlign="right" />

With icon

Live preview

icon prop shows a centered icon in place of a text label

App.tsx
tsx
<Divider icon="star" />
<Divider icon="plus" />
<Divider icon="settings" />

Special variants

Live preview

chatDate pill badge · boldBreak chapter heading · sectionTitle label above line · spacingDots decorative dots

chatDate

boldBreak

sectionTitle

Personal info

spacingDots

App.tsx
tsx
// chatDate — centered pill badge (chat date separator)
<Divider label="Today" chatDate />
 
// boldBreak — bold chapter or section break
<Divider label="Chapter 1" boldBreak />
 
// sectionTitle — label sits above the line
<Divider label="Personal info" sectionTitle />
 
// spacingDots — decorative vertical dots (no line)
<Divider spacingDots dots={3} />

Inset — list separator

Live preview

inset offsets the line from the left — aligns with the content text in list items with leading avatars

JD
John Doe
JS
Jane Smith
BL
Bob Lee
App.tsx
tsx
// inset={64} skips past a 36px avatar + 12px gap + 16px padding
<Divider inset={64} />

Vertical

Live preview

orientation='vertical' renders an inline divider — give the parent a fixed height

DashboardProjectsSettings
App.tsx
tsx
<div style={{ display: 'flex', alignItems: 'center', gap: 12, height: 32 }}>
<span>Dashboard</span>
<Divider orientation="vertical" />
<span>Projects</span>
<Divider orientation="vertical" lineStyle="dashed" />
<span>Settings</span>
</div>

Props / API

Api Props

Props

PropTypeDefaultDescription
lineStyle'solid' | 'dashed' | 'dotted' | 'thick' | 'gradient' | 'gradient-fade' | 'double''solid'Line style
color'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error''default'Line color
orientation'horizontal' | 'vertical''horizontal'Divider direction
labelReactNodeundefinedText or element shown in the center of the line
labelAlign'left' | 'center' | 'right''center'Horizontal alignment of the label
iconIconNameundefinedIcon shown centered in the divider
insetnumberundefinedLeft offset in px — for list separators that skip an avatar/icon
sectionTitlebooleanfalseRenders label above the line as a section heading
chatDatebooleanfalseRenders label in a centered pill badge — chat date separator style
boldBreakbooleanfalseBold section-break style with heavier label text
spacingDotsbooleanfalseDecorative vertical spacing dots instead of a line
dotsnumber1Number of dots for spacingDots style