Available from v1.0.0

Separator

Separator is a themed UIView subclass for dividing content with full-width, centered, or default styles.

Platform availability: iOS 17.0+

When to use:

• Use Separator when you need to visually divide content sections in lists, forms, or stacked layouts.
• Consider using spacing or padding alone when a visual divider line would add unnecessary visual noise.

It includes the following features:

• Three style options: full-width, centered, and default.
• Configurable inset for spacing control.
• Automatic color theming with design system colors.

Import

                                                        
                                                        
                                                            import BackbaseDesignSystem
                                                        
                                                            

Visual reference

API reference

Separator

Properties

Initializers

• init(style:inset:)
• Initializes and returns the separator view.

• init(frame:)
• Initializes and returns the separator view with a frame.

Separator.Style

An enumeration defining the style options for the separator.

Usage

Basic usage

Create a simple separator with default styling:

                                                        
                                                        
                                                            let separator = Separator()
                                                        view.addSubview(separator)
                                                        
                                                            

Full-width separator

Create a separator that spans the full width:

                                                        
                                                        
                                                            let separator = Separator(style: .fullWidth)
                                                        
                                                            

Centered separator with custom inset

Create a centered separator with custom inset:

                                                        
                                                        
                                                            let separator = Separator(style: .centered, inset: 24)
                                                        
                                                            

Custom color

Customize the separator color:

                                                        
                                                        
                                                            let separator = Separator()
                                                        separator.color = Theme.colors.border.default
                                                        
                                                            

Customization

Styling

The Separator automatically uses the design system's border color (Theme.colors.border.subtle).

Custom styles

Customize the separator appearance:

                                                        
                                                        
                                                            let separator = Separator(style: .centered, inset: DesignSystem.shared.spacer.lg)
                                                        separator.color = Theme.colors.border.default
                                                        
                                                            

Accessibility

This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.

Accessibility configuration

Best practices

• The Separator is a decorative element and does not require specific accessibility configuration.
• It is automatically excluded from the accessibility tree.

Dependencies

• External dependencies: None
• Internal dependencies: None

Design tokens

Component styling is applied automatically through the design system's theming infrastructure.

JSON tokens

This component uses semantic tokens only. See Semantic tokens below.

Semantic tokens

These tokens are accessed via the public DesignSystem.shared API.

See also

• SummaryStackView - Component that may use separators between rows