Divider

Atom
Horizontal, vertical, with label, with action.
src/atoms/divider
View in Layout

Playground

Every control sets a real prop of DividerProps. The JSX below updates as you go.
Props
Orientation
pick one
Emphasis
pick one
children
string
JSX · DividerProps
<Divider horizontal />

Variants

3 examples from src/atoms/divider/divider.md, each rendered live from its own JSX.
Edit
Delete
Vertical
<Row>
<Typography>Edit</Typography>
<Divider vertical />
<Typography>Delete</Typography>
</Row>
Label
<Divider>Or continue with</Divider>
Action
<Divider>
<Button ghost small>Show more</Button>
</Divider>

Anatomy

1
Rule
2
Label
Dimmed parts appear only in some states or variants.

Props

8 props on DividerProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
1 prop
children
ReactNode
–
Optional middle content. With children, a horizontal divider renders a flanking-line + centered-label row (the "with label" / "with action" patterns). A string renders as the uppercase mono caption label; arbitrary nodes (e.g. a button) render as-is for the action pattern. Ignored when vertical.
Orientation
pick one
2 props
horizontal
boolean
false
vertical
boolean
false
Emphasis
pick one
5 props
soft
boolean
false
A quieter rule: the hairline at 60% of its strength.
strong
boolean
false
A firmer rule: the field-border line, twice the hairline's strength.
inset
boolean
false
Vertical only: a short rule (18 px) centred in its row with 4 px kept on each side, instead of a rule that stretches to the row's height. The separator between groups in a toolbar or a floating bar. A horizontal divider ignores it.
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
Roles
separator
ARIA on web
aria-labelledby
aria-orientation

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

A divider spans the width of its parent, so give it a bounded container.
<Column>
<Typography>Profile</Typography>
<Divider />
<Typography>Account</Typography>
</Column>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--fd
--ft
--ln

Related components