A change the reader confirms
Action card is how an assistant asks before it changes anything. It says what the change does and what it leaves alone, and waits for Confirm. The card never makes the change: the host does, through the same action its own buttons use, then the card keeps the record of what happened, with Undo while it can be reversed.
Propose, confirm, undo
Confirm and the card turns into one row that says what was done, announced to a screen reader as a status, unless it lists its facts, which it keeps under the receipt. Dismiss and it says nothing changed. The host owns the status: onConfirm makes the change and sets it to confirmed, onUndo reverses it.
A change that takes something away
Set tone to destructive and Confirm takes the destructive colour, for a cancellation or a refund. The other button reads Dismiss, never Cancel, which beside a cancellation would read as the action itself.
Records
Once the reader has answered, the card is the thread's record of it: what was done, or that nothing changed, or that it was reversed.
With its facts
Give the card facts and the reader confirms with the numbers in front of them: a line each, label beside value. Confirmed, the card keeps them under the receipt, and a Confirmed read-out stands where Confirm was, so the proposal and its record share one shape. Write the facts for the state the card is in.
- Status
- Open 6 · Nearly full 2 → Closed 8
- Booked
- 41 walkers
- Left alone
- 3 already full
- Status
- Open 6 · Nearly full 2 → Closed 8
- Booked
- 41 walkers
// From the npm package
import { ActionCard } from 'rift-ds/components/ActionCard/ActionCard';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/action-card.json