DesignFoundation

Surface styles

.dfPopupStyle(_:) restyles every popup in a subtree. Eight ship: .standard (hairline border, layered shadow), .frosted, .glass (iOS/macOS 26, honors theme.materials.preferLiquidGlass), .accent, .gradient, .inverse, .outlined and .tinted(_:) (a severity wash). Colored styles pick a foreground that reaches WCAG AA on every fill stop and re-point the default DFButton at the surface, so plain content stays legible in every preset, light and dark. Apply the style above the presenting modifier.

YourContentView()
    .dfPopup(isPresented: $showPopup) {
        DFPopupCard(
            icon: "sparkles",
            title: "Orbit Pro",
            message: "Unlimited projects and workspaces.",
            primaryAction: DFPopupAction("Upgrade") { },
            secondaryAction: DFPopupAction("Not now") { showPopup = false }
        )
    }
    .dfPopupStyle(.gradient)

// .standard  .frosted  .glass  .accent  .gradient  .inverse  .outlined  .tinted(_:)
YourContentView().dfPopupStyle(.frosted)
YourContentView().dfPopupStyle(.tinted(.warning))   // .info .success .warning .error

if #available(iOS 26, macOS 26, *) {
    YourContentView().dfPopupStyle(.glass)
}

Recorded from the DFPlayground Popup Lab running on iOS 26 (light/dark, DesignFoundation presets).

Popup cards

DFPopupCard is composed popup content: an icon badge or edge-to-edge hero media, a title, a message, up to three actions (primary filled, secondary translucent, tertiary plain text) and an optional close button. iconTint is .brand, .soft or .severity(_:); alignment is .center or .leading. Hero media bleeds to the surface edges and a content slot sits between the message and the actions.

YourContentView().dfPopup(isPresented: $showPopup) {
    DFPopupCard(
        icon: "trash",
        iconTint: .severity(.error),
        title: "Delete “Q3 Roadmap”?",
        message: "This project and its 14 tasks will be permanently removed.",
        primaryAction: DFPopupAction("Delete", role: .destructive) { deleteProject() },
        secondaryAction: DFPopupAction("Cancel") { showPopup = false }
    )
}

// Three actions and a close button
DFPopupCard(
    icon: "bell.badge",
    title: "Turn on notifications",
    message: "Get a nudge when a teammate mentions you.",
    primaryAction: DFPopupAction("Allow") { },
    secondaryAction: DFPopupAction("Not now") { },
    tertiaryAction: DFPopupAction("Ask me later") { },
    onClose: { showPopup = false }
)

// Hero media plus a content slot
DFPopupCard(
    title: "Summer launch sale",
    message: "Upgrade any plan this week.",
    primaryAction: DFPopupAction("Claim 40% off") { },
    media: {
        LinearGradient(colors: [theme.colors.primary, theme.colors.accent],
                       startPoint: .topLeading, endPoint: .bottomTrailing)
            .frame(height: 120)
    },
    content: { Text("Ends Sunday") }
)

// The pieces, when you want your own layout
VStack(spacing: 16) {
    DFPopupIconBadge(systemImage: "bell.badge", tint: .soft)
    DFPopupHeader(icon: "bell", title: "Stay in the loop", message: "Choose what you hear about.", alignment: .leading)
    DFPopupActions(primary: DFPopupAction("Allow") { }, secondary: DFPopupAction("Not now") { })
}

Recorded from the DFPlayground Popup Lab running on iOS 26 (light/dark, DesignFoundation presets).

Toast styles

.dfToastStyle(_:) restyles every toast under the view it is applied to. Eight styles: .default, .tinted, .filled, .inverse, .frosted, .glass (26+), .banner (full width, flush with the edge, severity stripe) and .compact. Filled styles resolve an AA-contrast foreground. Severities are .info, .success, .warning and .error.

YourContentView()
    .dfToast(style: .filled)   // once, at the scene root: .default .tinted .filled .inverse .frosted .glass .banner .compact

Apply the style at the toast layer, as above, or after it (.dfToast().dfToastStyle(.filled)). .dfToastStyle(.filled).dfToast() does not restyle toasts, because they are drawn in an overlay owned by .dfToast().

DFToastQueue.shared.show(
    text: "Alex commented on Brand refresh.",
    icon: "bubble.left.fill",
    severity: .info,
    title: "New comment"
)

Recorded from the DFPlayground Popup Lab running on iOS 26 (light/dark, DesignFoundation presets).

Toast title, action and queue

A toast takes an optional title and a trailing action. Tapping the action runs it, then dismisses the toast. DFToastQueue shows one toast at a time at each message's own position (default .top); tapping a toast or swiping it toward its edge dismisses it, and new toasts are announced to VoiceOver.

DFToastQueue.shared.show(
    text: "Moved to the trash",
    icon: "trash",
    severity: .error,
    title: "Deleted",
    actionTitle: "Undo",
    action: { restore() }
)

DFToastQueue.shared.show(text: "Saved", icon: "checkmark.circle.fill",
                         severity: .success, position: .bottom)

Recorded from the DFPlayground Popup Lab running on iOS 26 (light/dark, DesignFoundation presets).

Nine positions

Toasts, floaters and centered cards work at every DFPopupPosition. A popup enters from, and leaves toward, its exitEdge; .center scales instead. The three clips walk all nine positions in turn.

// DFPopupPosition: 9 values
// .topLeading    .top     .topTrailing
// .leading       .center  .trailing
// .bottomLeading .bottom  .bottomTrailing

YourContentView()
    .dfPopup(isPresented: $showPopup, configuration: .floater(position: .topTrailing)) {
        Text("Top trailing")
    }

DFToastQueue.shared.show(text: "Saved", severity: .success, position: .bottomLeading)
let card = DFPopupConfiguration(kind: .center, position: .bottomTrailing)

Recorded from the DFPlayground Popup Lab running on iOS 26 (light/dark, DesignFoundation presets).

Transitions

Set transition on the configuration. .automatic (the default) scales at .center and slides at every other position. Slide and scale also fade. .asymmetric(insert:remove:) enters from one edge and leaves toward another.

var config = DFPopupConfiguration.floater(position: .bottom)
config.transition = .slide     // .automatic  .slide  .scale  .fade  .none

config.transition = .asymmetric(insert: .leading, remove: .trailing)

Recorded from the DFPlayground Popup Lab running on iOS 26 (light/dark, DesignFoundation presets).

Backdrops

DFPopupBackdrop is what is drawn between the host and the popup: .none, .dim (opacity from DFPopupTokens.backdropOpacity) or .blur (a Material). configuration.backdrop is additive: when it is nil the backdrop is derived from dimsBackground as before, and when set it wins (resolvedBackdrop reports the result).

YourContentView()
    .dfPopup(isPresented: $showPopup, configuration: DFPopupConfiguration(backdrop: .blur)) {
        Text("Blurred backdrop")
    }

Recorded from the DFPlayground Popup Lab running on iOS 26 (light/dark, DesignFoundation presets).

Auto-dismiss, tap, outside tap and drag

autoDismissAfter is a TimeInterval?; nil keeps the popup until dismissed (the toast preset defaults to 3 s). dismissOnTap and dismissOnOutsideTap are independent flags. With dismissOnDrag (on in the toast and floater presets) the popup follows your finger toward its exit edge and dismisses past a distance threshold or with enough velocity; otherwise it snaps back. The Escape key dismisses popups on macOS.

YourContentView()
    .dfPopup(
        isPresented: $showPopup,
        configuration: .floater(position: .bottom, autoDismissAfter: 2.5, dismissOnDrag: true)
    ) {
        Text("Link copied")
    }

// Centered default: dim backdrop, outside tap dismisses
let discard = DFPopupConfiguration.centered
// Toast: no backdrop, tap the toast to dismiss
let toast = DFPopupConfiguration.toast()
// Anything in between
let custom = DFPopupConfiguration(dismissOnTap: true, dismissOnOutsideTap: false, dimsBackground: true)

Recorded from the DFPlayground Popup Lab running on iOS 26 (light/dark, DesignFoundation presets).

Item-bound popups

.dfPopup(item:) presents while the binding is non-nil and hands the item to your content closure. Choosing a different item while it is up swaps the content and restarts the auto-dismiss timer; the item is kept alive through the exit transition.

struct Order: Identifiable {
    let id: Int
    let title: String
}

struct OrderList: View {
    let orders: [Order]
    @State private var selected: Order?

    var body: some View {
        List(orders) { order in
            Button(order.title) { selected = order }
        }
        .dfPopup(item: $selected, configuration: .floater(position: .bottom, autoDismissAfter: 3)) { order in
            Text(order.title)
        }
    }
}

Recorded from the DFPlayground Popup Lab running on iOS 26 (light/dark, DesignFoundation presets).

Bottom sheet

DFPopupKind.sheet is a bottom-anchored, full-width popup with rounded top corners, a grabber, a spring entrance and drag-down-to-dismiss. It always rests at the bottom edge and needs a longer drag to commit than a floater.

YourContentView()
    .dfPopup(isPresented: $showPopup, configuration: .sheet(backdrop: .dim)) {
        VStack(spacing: 12) {
            DFText("Share project", scale: .headline)
            DFText("Q3 Roadmap, 14 tasks", scale: .caption)
        }
    }

Recorded from the DFPlayground Popup Lab running on iOS 26 (light/dark, DesignFoundation presets).

Theming and tokens

Per-component tokens live at theme.components.popup. Every field is optional and nil inherits from the theme. Presentation uses the theme's animation tokens, and popup entrances use the additive DFAnimationTokens.spring token; with Reduce Motion they fall back to a short fade.

YourContentView().dfTheme({
    var theme = DFTheme.slateLight
    theme.components.popup = DFPopupTokens(cornerRadius: 24, padding: 20, maxWidth: 360, backdropOpacity: 0.5)
    return theme
}())

Recorded from the DFPlayground Popup Lab running on iOS 26 (light/dark, DesignFoundation presets).