Skip to main content
ToolbarItem(props: { placement?: ToolbarItemPlacement }, content: Component[]): ToolbarItem;

​
Parameters

​
props
{ placement?: ToolbarItemPlacement }
Configuration for the toolbar item.
​
content
Component[]
The content to display in the toolbar item. Typically a Button or Label.

​
Support

​
Usage

​
Basic toolbar item

NavigationStack([
    Text("Content")
])
.toolbar(
    ToolbarItem(
        { placement: "primaryAction" },
        [Button("Save", () => console.log("Saved"))]
    )
)

​
Multiple toolbar items

VStack([
    Text("Content")
])
.toolbar([
    ToolbarItem(
        { placement: "navigationBarLeading" },
        [Button("Cancel", () => console.log("Cancelled"))]
    ),
    ToolbarItem(
        { placement: "navigationBarTrailing" },
        [Button("Done", () => console.log("Done"))]
    )
])

​
Toolbar item with icon

VStack([
    Text("Content")
])
.toolbar(
    ToolbarItem(
        { placement: "primaryAction" },
        [
            Button(
                Label({ title: "Share", systemImage: "square.and.arrow.up" }),
                () => console.log("Share")
            )
        ]
    )
)

​
Principal placement

NavigationStack([
    Text("Content")
])
.toolbar(
    ToolbarItem(
        { placement: "principal" },
        [
            VStack([
                Text("Title").font("headline"),
                Text("Subtitle").font("caption")
            ])
        ]
    )
)

​
Bottom bar items

VStack([
    Text("Content")
])
.toolbar([
    ToolbarItem(
        { placement: "bottomBar" },
        [Button("Action 1", () => console.log("Action 1"))]
    ),
    ToolbarItem(
        { placement: "bottomBar" },
        [Button("Action 2", () => console.log("Action 2"))]
    )
])

​
Destructive action

VStack([
    Text("Content")
])
.toolbar(
    ToolbarItem(
        { placement: "destructiveAction" },
        [
            Button("Delete", () => console.log("Delete"))
                .foregroundStyle(Color("red"))
        ]
    )
)

​
Placement Options

​
Semantic Placements

  • automatic: System determines the best placement
  • principal: Primary position (typically center of navigation bar)
  • primaryAction: Main action button
  • confirmationAction: Confirm button (e.g., “Done”, “Save”)
  • cancellationAction: Cancel button
  • destructiveAction: Destructive action (e.g., “Delete”)

​
Positional Placements

  • navigationBarLeading: Leading edge of navigation bar
  • navigationBarTrailing: Trailing edge of navigation bar
  • topBarLeading: Leading edge of top bar
  • topBarTrailing: Trailing edge of top bar
  • bottomBar: Bottom toolbar

​
See Also