Divider

Usage

Dividers should be used as visual cues that separate content, groups, or sections. Dividers provide clarity of layout, improve readability, support a cleaner information hierarchy, and help guide users through their journey.

Divider colors should be subtle; enough contrast to be visible but not so strong that they become a dominant visual element.

Reference HIG for general guidance when designing for iOS.

Types

Horizontal full-width

Used between vertically stacked items, such as lists, rows, and sections. The default horizontal divider spans the full width of the container or screen with no side margins.

Behavior and interaction

Behavior

• Static and non-interactive.
• Responds to layout changes, including theming and viewport sizes.
• Provides consistent separation across screen sizes.

Positioning

• Align flush with container edges.
• Should not be nested within padded elements that reduce the dividers visual span.

Changelog