Yami UI

A hook for two-step confirmation flows. Compose with any Popover or Dialog.

Installation

Add the confirm component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/confirm.json

Usage

"use client"
import { useConfirm, ConfirmOverlay } from "@/components/ui/confirm"
import { Button } from "@/components/ui/button"

function DeleteButton() {
  const { triggerProps, overlayProps } = useConfirm({
    onConfirm: () => deleteAccount(),
    message: "This cannot be undone.",
  })

  return (
    <div className="relative inline-block">
      <Button variant="destructive" {...triggerProps}>Delete account</Button>
      <ConfirmOverlay {...overlayProps} />
    </div>
  )
}

Examples

Destructive

Default message and confirm variant

Code

"use client"
import { useConfirm, ConfirmOverlay } from "@/components/ui/confirm"
import { Button } from "@/components/ui/button"

function DeleteButton() {
  const { triggerProps, overlayProps } = useConfirm({
    onConfirm: () => deleteAccount(),
  })

  return (
    <div className="relative inline-block">
      <Button variant="destructive" {...triggerProps}>Delete account</Button>
      <ConfirmOverlay {...overlayProps} />
    </div>
  )
}

Custom message and labels

Override message, confirmLabel, cancelLabel, confirmVariant

Code

"use client"
import { useConfirm, ConfirmOverlay } from "@/components/ui/confirm"
import { Button } from "@/components/ui/button"

function ClearButton() {
  const { triggerProps, overlayProps } = useConfirm({
    onConfirm: () => clearList(),
    message: "This will permanently remove all items from the list.",
    confirmLabel: "Yes, clear it",
    cancelLabel: "Keep",
  })

  return (
    <div className="relative inline-block">
      <Button variant="outline" {...triggerProps}>Clear list</Button>
      <ConfirmOverlay {...overlayProps} />
    </div>
  )
}