LogoBaseStack
GuideComponents

Confirm Dialog

A confirm dialog is a modal window that asks users to confirm or cancel a critical action.

Docs Code

Usage

'use client'

import { Button } from '@workspace/ui/components/Button'
import { confirm } from '@workspace/ui/components/ConfirmDialog'
import { toast } from '@workspace/ui/components/Sonner'

export function ConfirmDialogDemo() {
    const handleDeleteUsers = () => {
        confirm({
            title: 'Delete Users',
            description: 'Are you sure you want to delete these users?',
            action: {
                label: 'Delete',
                onClick: () => {
                    toast.success({
                        title: 'Users Deleted',
                        description: 'Users deleted successfully',
                    })
                },
            },
        })
    }

    return (
        <Button variant="outline" onClick={handleDeleteUsers}>
            Delete Users
        </Button>
    )
}

Examples

Basic

'use client'

import { Button } from '@workspace/ui/components/Button'
import { confirm } from '@workspace/ui/components/ConfirmDialog'
import { toast } from '@workspace/ui/components/Sonner'

export function ConfirmDialogDemo() {
    const handleDeleteUsers = () => {
        confirm({
            title: 'Delete Users',
            description: 'Are you sure you want to delete these users?',
            action: {
                label: 'Delete',
                onClick: () => {
                    toast.success({
                        title: 'Users Deleted',
                        description: 'Users deleted successfully',
                    })
                },
            },
        })
    }

    return (
        <Button variant="outline" onClick={handleDeleteUsers}>
            Delete Users
        </Button>
    )
}

Destructive

'use client'

import { Button } from '@workspace/ui/components/Button'
import { confirm } from '@workspace/ui/components/ConfirmDialog'
import { toast } from '@workspace/ui/components/Sonner'

export function ConfirmDialogDestructive() {
    const handleClick = () => {
        confirm({
            variant: 'destructive',
            title: 'Archive Project',
            description: 'You can restore an archived project later from settings.',
            action: {
                label: 'Archive',
                onClick: () => {
                    toast.success({
                        title: 'Project Archived',
                        description: 'Project archived successfully',
                    })
                },
            },
        })
    }

    return (
        <Button variant="outline" onClick={handleClick}>
            Archive Project
        </Button>
    )
}