Seen Receipt

09:42Read
About this piece

Seen Receipt

Timestamp pill with double-check icon that colors sky when the message is read.

Usage

The import and the props worth knowing about, in one place.

import { Chat10 } from "@/components/beste/piece/chat10";

<Chat10
  surface="card"
  bordered={true}
  inverted={false}
  time="09:42"
  status="read"
  sentLabel="Sent"
  deliveredLabel="Delivered"
  readLabel="Read"
/>

More Chat pieces

View all Chat
AK
Ayşe and Merve are typing

Multi Typing

Typing indicator pill showing multiple avatar stack, summary text, and three pulsing dots.

Reminder: Q2 planning notes due by noon tomorrow.
Sends Tomorrow · 08:00

Scheduled Message

Dashed-border outgoing bubble above a Clock chip showing when it will send.

AK
Hey, did you get a chance to look at the new onboarding flow?
09:42

Message Bubble

Chat bubble with an avatar and timestamp. Role flips alignment and color.

09:44

Sticker

Oversized emoji as a standalone sticker message with a small timestamp beneath it.

Ayşe joined the conversation

System Message

Muted centered pill with an icon, used for joins, role changes, and other neutral system events.

AK
Ayşe Kaya09:42
Sure, sending the Figma link now3

Conversation Item

Inbox row with avatar, name, message preview, timestamp, and a primary unread count chip.