ComponentsDisplayDivider

Divider

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

7 styles6 colorsLabelIconInsetChat dateVertical

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

1import { Divider } from 'omverse-ui'
2 
3<Divider lineStyle="solid" />
4<Divider lineStyle="dashed" />
5<Divider lineStyle="dotted" />
6<Divider lineStyle="thick" />
7<Divider lineStyle="gradient-fade" />
8<Divider lineStyle="gradient" />
9<Divider lineStyle="double" />

Colors

Live preview

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

default

primary

secondary

success

warning

error

App.tsx

tsx

1<Divider lineStyle="thick" color="default" />
2<Divider lineStyle="thick" color="primary" />
3<Divider lineStyle="thick" color="secondary" />
4<Divider lineStyle="thick" color="success" />
5<Divider lineStyle="thick" color="warning" />
6<Divider lineStyle="thick" color="error" />

With label

Live preview

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

Continue with

Left aligned

Right aligned

App.tsx

tsx

1<Divider label="OR" />
2<Divider label="Continue with" />
3<Divider label="Left aligned"  labelAlign="left" />
4<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

1<Divider icon="star" />
2<Divider icon="plus" />
3<Divider icon="settings" />

Special variants

Live preview

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

chatDate

Today

boldBreak

Chapter 1

sectionTitle

Personal info

spacingDots

App.tsx

tsx

1// chatDate — centered pill badge (chat date separator)
2<Divider label="Today" chatDate />
3 
4// boldBreak — bold chapter or section break
5<Divider label="Chapter 1" boldBreak />
6 
7// sectionTitle — label sits above the line
8<Divider label="Personal info" sectionTitle />
9 
10// spacingDots — decorative vertical dots (no line)
11<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

John Doe

Jane Smith

Bob Lee

App.tsx

tsx

1// inset={64} skips past a 36px avatar + 12px gap + 16px padding
2<Divider inset={64} />

Vertical

Live preview

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

Dashboard

Projects

Settings

App.tsx

tsx

1<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>
7</div>

Props

PropTypeDefaultDescription

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