Skip to main content
ToolbarItem(props: { placement?: ToolbarItemPlacement }, content: Component[]): ToolbarItem;
​
placement
ToolbarItemPlacement
default:"automatic"
The preferred placement of the toolbar item. See ToolbarItemPlacement for all options.Common values:
  • Semantic: "automatic", "principal", "primaryAction", "confirmationAction", "cancellationAction", "destructiveAction"
  • Positional: "topBarLeading", "topBarTrailing", "bottomBar"
​
content
Component[]
required
The content to display in the toolbar item. Typically a Button or Label.

​
Support

​
Usage

​
Basic toolbar button

VStack([Text("Content")])
    .toolbar(
        ToolbarItem({ placement: "topBarTrailing" }, [
            Button("Save", () => handleSave())
        ])
    )

​
Leading and trailing items

VStack([Text("Content")])
    .toolbar([
        ToolbarItem({ placement: "topBarLeading" }, [
            Button("Cancel", () => handleCancel())
        ]),
        ToolbarItem({ placement: "topBarTrailing" }, [
            Button("Done", () => handleDone())
        ])
    ])

​
Principal placement (center)

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

​
Bottom bar

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

​
Icon button in toolbar

VStack([Text("Content")])
    .toolbar(
        ToolbarItem({ placement: "topBarTrailing" }, [
            Button(
                Image({ systemName: "square.and.arrow.up" }),
                () => handleShare()
            )
        ])
    )

​
See Also