How it works
PaletteControlGroupStyle lays out a control group's members as a compact, horizontal row of icon-only controls, packed together like swatches on a palette rather than a vertical stack of full-width rows. Use it when a ControlGroup gathers a set of closely related, frequently used actions — formatting commands, editing operations, or quick toggles — that you want to present as a tight cluster of tappable glyphs. Reach for this style instead of the platform default when horizontal density and at-a-glance recognition matter more than spelled-out labels. You apply it through the value name .palette on the controlGroupStyle(_:) modifier, never by constructing the type by hand.
Group the controls inside a ControlGroup
PaletteControlGroupStyle only governs the appearance of a ControlGroup, so the controls you want clustered must live in its content closure. In the example, a single
ControlGroupcollects threeButtons and aToggle, which become the members the palette arranges side by side.Select the style with .controlGroupStyle(.palette)
Rather than instantiating the struct, you opt in through the controlGroupStyle(_:) modifier and pass the static value
.palette, which resolves to a PaletteControlGroupStyle instance. In the example,.controlGroupStyle(.palette)is attached to theControlGroup, switching its members from stacked rows to a horizontal band of glyphs.Give each member a Label with a symbol
Because the palette style renders members as icon-only controls, each child should carry a
Labelwhose systemImage supplies the glyph the user actually sees; the text becomes the accessibility name. The example labels its actions"Cut","Copy", and"Paste"with the SF Symbols"scissors","doc.on.doc", and"doc.on.clipboard".Mix toggles in alongside buttons
The palette accommodates stateful controls, not just momentary actions, presenting a Toggle as a selectable glyph that reflects its on/off state in line with the surrounding buttons. Here the
Toggle(isOn: $pinned)with the"pin"symbol sits in the same row, its appearance tracking thepinnedstate.
.controlGroupStyle(.palette) to .controlGroupStyle(.navigation) and watch the icon cluster expand into stacked, labeled rows so you can see exactly what the palette style compresses.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct PaletteControlGroupStyleDemo: View {
@State private var pinned = false
var body: some View {
ControlGroup {
Button { } label: { Label("Cut", systemImage: "scissors") }
Button { } label: { Label("Copy", systemImage: "doc.on.doc") }
Button { } label: { Label("Paste", systemImage: "doc.on.clipboard") }
Toggle(isOn: $pinned) { Label("Pin", systemImage: "pin") }
}
.controlGroupStyle(.palette)
.padding()
}
}