A human-in-the-loop decision card that keeps risk, evidence and impact explicit before an agent acts: approve or reject, with typed confirmation for critical actions.
"use client";
import { useState } from "react";
import {
ApprovalCard,
ApprovalCardActions,
ApprovalCardApprove,
ApprovalCardConfirmation,
ApprovalCardDetail,
ApprovalCardDetails,
ApprovalCardHeader,
ApprovalCardReject,
type ApprovalCardStatus,
} from "@/components/ui/approval-card";
export default function ApprovalCardCriticalDemo() {
const [status, setStatus] = useState<Exclude<ApprovalCardStatus, "submitting" | "error">>("ready");
return (
<div className="flex min-h-[520px] w-full items-center justify-center p-6">
<div className="w-full max-w-[560px]">
<ApprovalCard status={status} risk="critical" variant="detailed" confirmation={{ phrase: "support-search-prod" }}>
<ApprovalCardHeader
title="Delete the production search index?"
description="This removes the index and every replica. It cannot be undone."
/>
<ApprovalCardDetails>
<ApprovalCardDetail label="Affected resources">support-search-prod · 8.2M indexed records</ApprovalCardDetail>
<ApprovalCardDetail label="Supporting evidence">No restorable snapshot exists.</ApprovalCardDetail>
</ApprovalCardDetails>
<ApprovalCardConfirmation />
<ApprovalCardActions>
<ApprovalCardReject onClick={() => setStatus("rejected")} />
<ApprovalCardApprove onClick={() => setStatus("approved")}>Delete index</ApprovalCardApprove>
</ApprovalCardActions>
</ApprovalCard>
</div>
</div>
);
}
Part of Uai — browse the full library on 21st.dev.