SwiftUI ToolbarSpacer

Context

Toolbars often become visually noisy when actions with different meaning sit directly next to each other. In practice, this creates small UX friction: users read grouped actions as one cluster, even when one action is destructive and the other is neutral.

ToolbarSpacer helps introduce intentional distance without resorting to layout hacks.

The original

.toolbar {
    ToolbarItem {
        Button("Edit", systemImage: "pencil") {}
    }
    
    ToolbarItem {
        Button("Delete", systemImage: "trash") {}
    }
}

The trick

.toolbar {
    ToolbarItem {
        Button("Edit", systemImage: "pencil") {}
    }

    ToolbarSpacer(.fixed)
    
    ToolbarItem {
        Button("Delete", systemImage: "trash") {}
    }
}

Why this works

The spacer communicates grouping. Instead of adding random padding to individual buttons, you describe structure directly at the toolbar level. That keeps intent readable and avoids brittle spacing tweaks when toolbar content changes.

Use it when…

you want to separate actions that belong to different intent groups
a destructive action should not visually blend into neutral actions
you want predictable spacing without custom layout work

Avoid it when…

all actions belong to one tight interaction cluster
spacing would suggest false separation in user flow

Takeaway: Use ToolbarSpacer to express action grouping, not just to add empty space.

Next steps

If you want to keep toolbars readable as features grow, these are useful follow-ups: