components

Component Patterns (macOS)

macOS Visual Design — Desktop-Native Feel

macOS apps should feel like professional desktop tools, not enlarged phone apps.

Sidebar: Use translucent sidebar by default (NavigationSplitView handles this). The sidebar background is slightly transparent when the window is active, becoming opaque when inactive — this signals which window has focus.

Color density: Similar to iOS — accent colors, branded surfaces, and colored icons are appropriate. However, in macOS Tahoe (26), sidebar icons default to monochrome (not tinted) since tinted icons clash with the translucent sidebar.

Content areas: Use opaque AppTheme backgrounds for content areas. Sidebars are the main translucent element.

Button Styles

// Primary action
Button("Save") { save() }
    .buttonStyle(.borderedProminent)
    .keyboardShortcut("s", modifiers: .command)

// Secondary action
Button("Cancel") { cancel() }
    .buttonStyle(.bordered)
    .keyboardShortcut(.escape)

// Tertiary / inline
Button("Details") { showDetails() }
    .buttonStyle(.borderless)

// Link-style
Button("Learn More") { openURL() }
    .buttonStyle(.link)

BUTTON HIERARCHY:

Level	Style	Use Case
Primary action	.borderedProminent	Save, Confirm, Send
Secondary	.bordered	Cancel, Settings
Tertiary	.borderless	Inline actions
Link	.link	Navigation, external links

Liquid Glass (macOS 26)

// Translucent glass background
VStack { content }
    .glassEffect()

// Glass button styles
Button("Action") { }
    .buttonStyle(.glass)

Button("Primary") { }
    .buttonStyle(.glassProminent)

Context Menus (right-click)

Text(item.name)
    .contextMenu {
        Button("Copy", systemImage: "doc.on.doc") { copy(item) }
            .keyboardShortcut("c", modifiers: .command)
        Button("Delete", systemImage: "trash", role: .destructive) { delete(item) }
        Divider()
        Menu("Move to") {
            ForEach(folders) { folder in
                Button(folder.name) { move(item, to: folder) }
            }
        }
    }