Feedback/DSModal

DSModal

feedback

since v1.0

Centered overlay dialog with a header, scrollable content area, and footer actions. Blocks background interaction.

iOS 17+macOS 14+

Purpose

Confirmation dialogs, forms requiring immediate attention, and multi-step mini-flows.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

Prop	Type	Default	Description
isPresentedreq	Binding<Bool>	—	Controls visibility.
titlereq	String	—	Modal heading.
size	DSModalSize	.md	Width constraint (.sm, .md, .lg, .full).
contentreq	ViewBuilder	—	Main modal content.
actions	ViewBuilder?	nil	Footer action buttons.

Examples

Confirmation dialog

Delete confirmation before an irreversible action.

swift

DSModal(isPresented: $showDelete, title: "Delete project?") {
    Text("This action cannot be undone.")
        .font(.system(size: 15))
        .foregroundStyle(DSColor.muted)
} actions: {
    HStack {
        DSButton("Cancel", variant: .ghost) { showDelete = false }
        DSButton("Delete", variant: .destructive) { viewModel.delete() }
    }
}

Form modal

Multi-field form in a modal.

swift

DSModal(isPresented: $showAddTask, title: "New Task", size: .md) {
    VStack(alignment: .leading, spacing: DSSpacing.md) {
        DSTextField(label: "Title", text: $taskTitle)
        DSTextArea(label: "Description", text: $taskDescription)
        DSSelectField(label: "Priority", selection: $priority, options: priorities)
    }
} actions: {
    HStack {
        DSButton("Cancel", variant: .ghost) { showAddTask = false }
        DSButton("Create", variant: .primary, isLoading: viewModel.isSaving) {
            viewModel.createTask()
        }
    }
}

Composition: Multi-step flow

Modal with steps and navigation.

swift

DSModal(isPresented: $showOnboarding, title: "Welcome", size: .lg) {
    VStack(spacing: DSSpacing.lg) {
        if step == 1 {
            OnboardingStep1()
        } else if step == 2 {
            OnboardingStep2()
        } else {
            OnboardingStep3()
        }
    }
} actions: {
    HStack {
        if step > 1 {
            DSButton("Back", variant: .ghost) { step -= 1 }
        }
        Spacer()
        DSButton(step == 3 ? "Finish" : "Next", variant: .primary) {
            if step < 3 { step += 1 } else { completeOnboarding() }
        }
    }
}