Message Status

Under a sent message: the time and a status icon, from sending to read or not sent.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add message-status
Also works with shadcn: npx shadcn@latest add @ritla/message-status
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

message-status.tsx

import { MessageStatus } from "@/components/ui/message-status";<MessageStatus status="read" time="09:41" />

Prop	Type	Default	Description
`status`	`"sending" \| "sent" \| "delivered" \| "read" \| "failed"`	None	Figma's Status.
`time / dateTime`	`ReactNode / string`	None	Figma's Time and its machine value.
`showLabel`	`boolean`	`false`	Figma's Show label; without it the words stay for screen readers.
`label`	`ReactNode`	None	Replaces the built-in label.

The state is always read as words, and never relies on colour alone: the icon's shape carries it.
The time is a <time> element.