toolbar

toolbar(content) adds toolbar items to the page that contains the view. content accepts ToolbarItem, ToolbarItemGroup, ToolbarSpacer, components that return them, or an array of them.

import { app } from "onescript"
import {
  Button, Modifier, Symbol, Text, ToolbarItemGroup, ToolbarSpacer, useState,
} from "onescript/views"

function Editor() {
  const [status, setStatus] = useState("Ready")

  return (
    <Text modifier={Modifier.toolbar([
      <ToolbarSpacer placement="bottomBar" />,
      <ToolbarItemGroup placement="bottomBar">
        <Button action={() => setStatus("Packages")}><Symbol name="shippingbox" /></Button>
        <Button action={() => setStatus("Terminal")}><Symbol name="apple.terminal" /></Button>
        <Button action={() => setStatus("Running")}><Symbol name="play" /></Button>
      </ToolbarItemGroup>,
      <ToolbarSpacer placement="bottomBar" />,
    ])}>
      {status}
    </Text>
  )
}

await app.show(<Editor />)

On iOS 26 and later, the buttons in one ToolbarItemGroup are combined into a single Liquid Glass capsule. The flexible spacers on both sides center the group.

ToolbarItem

Places a single item.

ToolbarItemGroup

Places several items at the same placement.

ToolbarSpacer

Adds space between toolbar items.

ToolbarSpacer uses the native API on iOS 26 and later. On earlier versions, a flexible spacer becomes a flexible space and a fixed spacer has no effect.

ToolbarItemPlacement

Behavior

• Toolbars work with or without NavigationStack. Each pushed page shows only its own toolbar items.
• Modifiers chained before toolbar apply to the content, and modifiers chained after it apply to the result, matching SwiftUI's modifier order.
• ToolbarItem, ToolbarItemGroup, and ToolbarSpacer do not accept modifier. Apply modifiers to the views inside them instead.
• The root page also shows the Close and Console buttons at cancellationAction and confirmationAction.
• Widgets do not support toolbars.