Divider

Horizontal, vertical, with label, with action.
Profile
Account
iOS
Profile
Account
Android
Profile
Account
Web
tsx
<Column>
<Typography>Profile</Typography>
<Divider />
<Typography>Account</Typography>
</Column>
A divider spans the width of its parent, so give it a bounded container.

Props

Prop
Description
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 muted label text; arbitrary nodes (e.g. a button) render as-is for the action pattern. Ignored when `vertical`.
horizontal
boolean
Orientation (pick one; default is horizontal).
vertical
boolean
Orientation (pick one; default is horizontal).
soft
boolean
Emphasis (pick one; default tracks the border token).
strong
boolean
Emphasis (pick one; default tracks the border token).
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.

Do & Don’t

Plain

Don’t
Profile
Account
Notifications
Billing
Click a row: a divider between every one is noise that competes with the content.
Do
Profile
Account
Notifications
Sign out
Click a row: group with spacing and reserve a divider for a real break like Sign out.

With label

Don’t
Click Sign in: a full sentence in the label divider buries the choice.
Do
Click a provider: keep the label to a few words and let the buttons carry the options.

With action

Don’t
Click the button: an action divider that does nothing is just decoration.
Do
Logged in from 2 new devices · 3 more entries
Click Show more: the button toggles its label and reveals the rest.

Vertical

Don’t
Edit
Delete
Click an action: a vertical rule between stacked items reads as a glitch.
Do
Edit
Delete
Share
Click an action: the vertical rule separates inline actions in a row.
← Container
Dropdown →