Delivery status
The delivery-state indicator for an outbound message: a clock while sending, one check when accepted, two when delivered, a red alert on failure. Extracted from the thread so you can reuse it in inbox rows, call logs, and receipts.
Sending Sent Delivered Failed
Installation
npx shadcn@latest add @handset/delivery-statusUsage
import { DeliveryStatus } from "@/components/handset/delivery-status";
<DeliveryStatus status={message.status} />Renders nothing for received or inbound messages, so you can drop it beside any message without branching on direction.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | MessageStatus | — | queued | sending | sent | delivered | failed | received. |
| className | string | — | Merged onto the icon (e.g. size overrides). |