Confirm Dialog

import { Button, ConfirmDialog, toast } from 'ferry-ui'
import { Trash2 } from 'lucide-react'

export default function ConfirmDialogHero() {
  return (
    <ConfirmDialog
      trigger={
        <Button variant="destructive" icon={<Trash2 />}>
          Delete project
        </Button>
      }
      title="Delete project “Billing portal”?"
      description="The project, its invoices and its API keys are deleted. You cannot undo this."
      confirmLabel="Delete project"
      onConfirm={() => {
        toast.success('Project deleted')
      }}
    />
  )
}

import { Button, ConfirmDialog, toast } from 'ferry-ui'
import { KeyRound } from 'lucide-react'

// Stands for a request to your server.
const wait = (ms: number) => new Promise<void>((resolve) => window.setTimeout(resolve, ms))

export default function ConfirmDialogPending() {
  return (
    <ConfirmDialog
      trigger={
        <Button variant="destructive" icon={<KeyRound />}>
          Revoke key
        </Button>
      }
      title="Revoke API key “Analytics export”?"
      description="Requests that use this key start to fail immediately."
      confirmLabel="Revoke key"
      onConfirm={async () => {
        await wait(1500)
        toast.success('API key revoked')
      }}
    />
  )
}

import { Button, ConfirmDialog } from 'ferry-ui'

// Stands for a request that the server refuses.
const wait = (ms: number) => new Promise<void>((resolve) => window.setTimeout(resolve, ms))

export default function ConfirmDialogError() {
  return (
    <ConfirmDialog
      trigger={<Button variant="destructive">Delete team</Button>}
      title="Delete team “Design”?"
      description="The members of the team keep their accounts."
      confirmLabel="Delete team"
      onConfirm={async () => {
        await wait(800)
        throw new Error('This team owns 2 projects. Move them to another team first.')
      }}
    />
  )
}

import { Button, ConfirmDialog, toast } from 'ferry-ui'

export default function ConfirmDialogTones() {
  return (
    <>
      <ConfirmDialog
        tone="destructive"
        trigger={<Button variant="destructive">Remove member</Button>}
        title="Remove Sam Lee from the team?"
        description="Sam loses access to all the projects of the team."
        confirmLabel="Remove member"
        onConfirm={() => {
          toast.success('Member removed')
        }}
      />
      <ConfirmDialog
        tone="warning"
        trigger={<Button>Pause subscription</Button>}
        title="Pause your subscription?"
        description="Your team keeps read-only access to each project until you resume."
        confirmLabel="Pause subscription"
        cancelLabel="Keep subscription"
        onConfirm={() => {
          toast.success('Subscription paused')
        }}
      />
      <ConfirmDialog
        tone="primary"
        trigger={<Button>Send invoice</Button>}
        title="Send invoice INV-2041?"
        description="The customer gets the invoice by email. After that, you cannot edit it."
        confirmLabel="Send invoice"
        cancelLabel="Not yet"
        onConfirm={() => {
          toast.success('Invoice sent')
        }}
      />
    </>
  )
}

import { Button, ConfirmDialog, toast } from 'ferry-ui'

export default function ConfirmDialogTyped() {
  return (
    <ConfirmDialog
      trigger={<Button variant="destructive">Delete workspace</Button>}
      title="Delete workspace “acme-marketing”?"
      description="All the projects, members and invoices of this workspace are deleted. You cannot undo this."
      confirmText="acme-marketing"
      confirmLabel="Delete workspace"
      onConfirm={() => {
        toast.success('Workspace deleted')
      }}
    />
  )
}

import * as React from 'react'
import {
  Button,
  ConfirmDialog,
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  toast,
} from 'ferry-ui'
import { MoreHorizontal, Trash2 } from 'lucide-react'

export default function ConfirmDialogControlled() {
  const [confirmOpen, setConfirmOpen] = React.useState(false)

  return (
    <>
      <div className="flex w-full max-w-sm items-center justify-between gap-3 rounded-lg border bg-surface-100 px-4 py-2.5">
        <span className="text-sm text-foreground">Analytics export</span>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="ghost"
              size="icon-tiny"
              icon={<MoreHorizontal />}
              aria-label="Actions for Analytics export"
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem variant="destructive" onSelect={() => setConfirmOpen(true)}>
              <Trash2 /> Revoke key
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
      <ConfirmDialog
        open={confirmOpen}
        onOpenChange={setConfirmOpen}
        title="Revoke API key “Analytics export”?"
        description="Requests that use this key start to fail immediately. You cannot undo this."
        confirmLabel="Revoke key"
        onConfirm={() => {
          toast.success('API key revoked')
        }}
      />
    </>
  )
}

import { Button, Callout, Checkbox, ConfirmDialog, Label, toast } from 'ferry-ui'

export default function ConfirmDialogChildren() {
  return (
    <ConfirmDialog
      trigger={<Button variant="destructive">Remove member</Button>}
      title="Remove Sam Lee from the team?"
      description="Sam loses access to all the projects of the team. You can invite Sam again later."
      confirmLabel="Remove member"
      onConfirm={() => {
        toast.success('Member removed')
      }}
    >
      <Callout tone="warning" size="sm" title="Sam owns 2 projects">
        <ul className="list-disc pl-4">
          <li>Billing portal</li>
          <li>Mobile app</li>
        </ul>
      </Callout>
      <Label className="text-[13px] font-normal">
        <Checkbox defaultChecked />
        Move these projects to my account
      </Label>
    </ConfirmDialog>
  )
}