Glowup
FOUNDATIONS · 02 / 89
Divider
Divider — a Material You foundations component for React Native and web.
󱀫
packages/ui/src/components/Divider.tsx
Live demo
OR
Properties
4 controls
Orientation
Horizontal
󰍝
Thickness
Inset
Label
Usage
Divider.tsx
<Divider> OR </Divider>
Variants
The states and shapes this component is meant to be used in.
List separators
Notifications
Email digest
Weekly
Mentions
Instant
Product updates
Off
With label
OR
Yesterday
Thickness
thickness 1 — default hairline rule
thickness 2
thickness 4 — section break
Vertical
128
Components
42
Tokens
7
Groups
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
6 on DividerProps
children
React.ReactNode
Centred label, splitting the rule in two. Horizontal only — a vertical divider is a bare rule.
contentSpacing
number
default: 16
Gap between the label and each half of the rule. No label, no gap.
inset
number
default: 0
Margin at both ends of the line, along its own axis.
orientation
"horizontal" | "vertical"
default: "horizontal"
style
ViewStyle
thickness
number
default: 1
Line thickness, in pixels.
󰅁
Previous
Typography
Next
Paper
󰅂