Toast
Toasts
Source and install need .
pnpm dlx shadcn@latest add @assembli/message-toastMessage Toast
A chat notification you can answer in place: avatar with an app badge, sender, channel, time and a two-line preview, one-tap emoji reactions, and a Reply button that opens an inline composer. Enter sends, Escape backs out, and the toast confirms before it leaves.
Props
Other props pass through to the root element.
name*
string
message*
React.ReactNode
avatar
string
Image URL. Without one, the initials sit on a disc tinted by
hue.initials
string
hue
number
Default
2500–360, the tint behind the initials.
context
string
Where it came from, e.g. "#design-crit" or "Direct message".
time
string
Default
"now"reactions
string[]
Default
["👍", "🎉", "👀"]Quick reactions shown under the message.
onReply
(text: string) => void
Shows a Reply button that opens an inline composer.
onReact
(emoji: string) => void
onDismiss
() => void
Called after a reply or reaction lands, or when the toast is closed.
| Prop | Type | Default | Description |
|---|---|---|---|
| name* | string | – | |
| message* | React.ReactNode | – | |
| avatar | string | – | Image URL. Without one, the initials sit on a disc tinted by hue. |
| initials | string | – | |
| hue | number | 250 | 0–360, the tint behind the initials. |
| context | string | – | Where it came from, e.g. "#design-crit" or "Direct message". |
| time | string | "now" | |
| reactions | string[] | ["👍", "🎉", "👀"] | Quick reactions shown under the message. |
| onReply | (text: string) => void | – | Shows a Reply button that opens an inline composer. |
| onReact | (emoji: string) => void | – | |
| onDismiss | () => void | – | Called after a reply or reaction lands, or when the toast is closed. |
