GitHub

Prompt

PreviousNext

A dialog that prompts the user for confirmation.

Loading
Loading...
"use client";
 
import { Button } from "@/components/ui/button";
import { Prompt } from "@/components/ui/prompt";
 
export function PromptDemo() {
  return (
    <div className="flex flex-col items-start gap-2">
      <p className="text-muted-foreground text-sm">
        Permanently remove this workspace and all project data.
      </p>
      <Prompt>
        <Prompt.Trigger asChild>
          <Button variant="destructive">Delete workspace</Button>
        </Prompt.Trigger>
        <Prompt.Content>
          <Prompt.Header>
            <Prompt.Title>Delete workspace?</Prompt.Title>
            <Prompt.Description>
              This action cannot be undone. This will permanently delete your
              workspace, members, and billing history.
            </Prompt.Description>
          </Prompt.Header>
          <Prompt.Footer>
            <Prompt.Cancel>Cancel</Prompt.Cancel>
            <Prompt.Action>Delete workspace</Prompt.Action>
          </Prompt.Footer>
        </Prompt.Content>
      </Prompt>
    </div>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/prompt"

Usage

import { Prompt } from "@/components/ui/prompt";
<Prompt open={isOpen}>
  <Prompt.Content>
    <Prompt.Header>
      <Prompt.Title>Delete Account</Prompt.Title>
      <Prompt.Description>
        This action cannot be undone. This will permanently delete your account.
      </Prompt.Description>
    </Prompt.Header>
    <Prompt.Footer>
      <Prompt.Cancel onClick={() => setIsOpen(false)}>Cancel</Prompt.Cancel>
      <Prompt.Action onClick={() => handleDelete()}>Delete</Prompt.Action>
    </Prompt.Footer>
  </Prompt.Content>
</Prompt>

Props

Root

PropTypeDefaultDescription
openboolean-Controls the visibility of the prompt dialog.
childrenReactNode-The content to display in the dialog.

Content, Header, Footer

These are layout components that help structure the dialog content.

Title, Description

Used to display the main text content in the dialog.

Action, Cancel

Button components for confirming or canceling the prompt action.