Components
Loading preview...
The Confirmation Button is a shadcn/ui-based component designed to prevent accidental actions by requiring explicit user confirmation. On the first click, the button changes its state to display a confirmation prompt along with ✅ (confirm) and ❌ (cancel) options, giving users a clear choice before proceeding. This is particularly useful for destructive or critical actions like Delete, Archive, or Submit final changes, where mistakes can have significant consequences. The component supports multiple sizes (sm, md, lg) and integrates seamlessly with Tailwind styling, making it visually consistent while improving safety and usability in interactive workflows.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/confirmation-buttonimport ConfirmationButton from "@/components/ui/confirmation-button";
export default function DemoConfirmationButton() {
return (
<div className="flex gap-4">
<ConfirmationButton label="Delete" onConfirm={() => alert('Deleted!')} />
<ConfirmationButton label="Archive" confirmLabel="Really archive?" onConfirm={() => alert('Archived!')} size="lg" />
</div>
);
}