Components
Confirmation Button
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.
import 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>
);
}
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.