## Approval Card (S—209)

An approval request: details at a glance, Approve or Reject with an optional note, a resolved state and an undo window.

- URL: https://sundaeui.dev/components/approval-card
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/approval-card.json`
- Tags: request, expense, decision, workflow, review, approval

The card shows who asked, what and how much, with the policy check that triggered review. Approve resolves straight away; Reject asks for a reason first.
After a decision the card collapses to a resolved line with a five-second undo.

### Usage

```tsx
import { ApprovalCard } from '@/components/sundae/approval-card'

<ApprovalCard />
```

### Props

- `request` (`Request`, required): Requester, title, amount, reason, flags.
- `onDecide` (`(d: 'approved' | 'rejected', note?: string) => void`): Decision callback.
- `requireReason` (`boolean`, default `true`): Reject needs a note.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Expense, access, refund and content approval queues.

### When not to use

- Multi-step reviews with several approvers: show a timeline.

### Accessibility

- Actions are buttons; the reject reason is a labelled textarea that receives focus.
- The decision and undo are announced.
- Reduced motion removes the movement and keeps every state change.