OUDSToolBarBottom

The bottom toolbar is a kind of navigation bar component used to display leading and trailing actions at the bottom of the screen when supported.

iOS 15.0+
visionOS 1.0+

@MainActor struct OUDSToolBarBottom

Overview

toolBarBottom View helper applies a SwiftUI toolbar configuration.

Platform considerations

Available on iOS, iPadOS, and visionOS
Not available on watchOS, tvOS and macOS

Guidelines

Test the use of the toolBarBottom for both iOS with Liquid Glass and not Liquid Glass
If you use both an OUDSTabBar with the toolBarBottom, the toolbar will be above the tabbar for iOS lower than 26, not recommended
If you use both an OUDSTabBar with the toolBarBottom, the toolbar will be behind the tabbar for iOS 26+, so not usable, not recommended
Avoid use of both toolBarBottom and OUDSTabBar in the same page

Badges uses

Because the system does not render system badge for items in bottom toolbar, the OUDSBadge is used for iOS 26 with Liquid Glass and bottom toolbars. However the glassified effect of Liquid Glass does not make sometimes the badge readable, that is the reason why you should use badge for bottom toolbars with lots of care and prefer prominent or tinted styles for the item with the badge instead of default.

For iOS until 18 and without Liquid Glass OUDSBadge is always used.

Code samples

Define leading and trailing items for the bottom toolbar

    SomeView()
        .toolBarBottom(leadingItems: {
                OUDSToolBarItem(label: "Some label") { /* Action to process */ }
            }, trailingItems: {
                OUDSToolBarItem(icon: Image(decorative: "some_image"), accessibilityLabel: "Label") { /* Action to process */ }
        })

Design documentation

unified-design-system.orange.com

Themes rendering

Liquid Glass

Orange

A bottom toolbar component in light mode with Liquid Glass effect and Orange theme

Orange Compact

A bottom toolbar component in light mode with Liquid Glass effect and Orange Compact theme

Sosh

A bottom toolbar component in light mode with Liquid Glass effect and Sosh theme

Wireframe

A bottom toolbar component in light mode with Liquid Glass effect and Wireframe theme

Without Liquid Glass

Orange

A bottom toolbar component in light mode without Liquid Glass effect and Orange theme

Orange Compact

A bottom toolbar component in light mode without Liquid Glass effect and Orange Compact theme

Sosh

A bottom toolbar component in light mode without Liquid Glass effect and Sosh theme

Wireframe

A bottom toolbar component in light mode without Liquid Glass effect and Wireframe theme