--- title: Message description: Chat/comment message bubble with author and timestamp visibility: guest draft: false --- # Message A chat message bubble with author metadata, timestamp, side-based alignment, and slots for reactions and attachments. Designed for chat interfaces and comment threads. ## Basic Usage :::preview{title="Simple message"}
Hey, how's the project going?
::: :::source{language="blade"} Hey, how's the project going? ::: ## With Timestamp :::preview{title="Message with timestamp"}
The new dashboard looks great!
::: :::source{language="blade"} The new dashboard looks great! ::: ## Side Alignment Use `side="right"` for outgoing messages (current user): :::preview{title="Left and right alignment"}
Have you seen the latest designs? Yes, they look amazing! Great, I'll send the final files tomorrow.
::: :::source{language="blade"} Have you seen the latest designs? Yes, they look amazing! Great, I'll send the final files tomorrow. ::: ## With Avatar :::preview{title="Message with avatar"}
Good morning everyone!
::: :::source{language="blade"} Good morning everyone! ::: ## Author Role Badge :::preview{title="Author with role"}
Welcome to the team channel.
::: :::source{language="blade"} Welcome to the team channel. ::: ## Edited Indicator :::preview{title="Edited message"}
This message was updated after posting.
::: :::source{language="blade"} This message was updated after posting. ::: ## System Messages with Intent Use intent variants for system-generated messages: :::preview{title="Intent variants"}
Alice joined the channel. Deployment completed successfully. Rate limit approaching: 80% used.
::: :::source{language="blade"} Alice joined the channel. Deployment completed successfully. Rate limit approaching: 80% used. ::: ## With Reactions :::preview{title="Message with reactions"}
We shipped the new feature! πŸš€
::: :::source{language="blade"} We shipped the new feature! πŸš€ ::: ## With File Attachments Attach files inline beneath the message text. The pattern below renders a vertical stack of clickable rows, each with an icon, file name, and human-readable size β€” the same shape Slack, Discord, and Linear use for attached documents: :::preview{title="Message with two file attachments"}
Drafted the brand guidelines and a first pass at the typography spec β€” let me know what you think before EOD. brand-guidelines-v3.pdf 2.4 MB Β· PDF typography-spec.fig 186 KB Β· Figma
::: :::source{language="blade"} Drafted the brand guidelines and a first pass at the typography spec β€” let me know what you think before EOD. brand-guidelines-v3.pdf 2.4 MB Β· PDF typography-spec.fig 186 KB Β· Figma ::: For developer apps wiring this to real Eloquent models, swap the inline `` blocks for a `@foreach($message->attachments as $attachment)` loop and bind `href="{{ $attachment->url }}"` plus `{{ $attachment->name }}` / `{{ $attachment->human_size }}` accessors on the model. ## With Image in Chat For chat-style image previews, drop a placeholder `` straight into the message body at a constrained max-width. The bubble auto-sizes around the image, and the rounded corners on the image match the message bubble's radius for a polished look: :::preview{title="Message with inline image preview"}
First draft of the dashboard hero β€” colors pulled from the new brand palette. Thoughts? Dashboard hero draft showing dark background with accent-purple stat tiles
::: :::source{language="blade"} First draft of the dashboard hero β€” colors pulled from the new brand palette. Thoughts? Dashboard hero draft showing dark background with accent-purple stat tiles ::: ::: tip Use `loading="lazy"` on inline chat images so a long thread doesn't trigger network fetches for messages that haven't scrolled into view. Pin the rendered `width` (or `max-width`) inline so the image doesn't blow past the message column when the source asset is wider than the chat layout β€” the `height: auto` keeps the natural aspect ratio. For real apps, replace the `/placeholder/...` URL with `Storage::url($message->attachment->path)` or a signed CDN URL. ::: ## Delivery status `status` renders the delivery ladder for a message you sent. Every rung carries its **own wording** β€” the glyph and color are support, never the only signal. The glyph follows the convention every messaging app shares: **one check** = sent to the server, **two checks** = delivered to the recipient, **two accent checks** = read. `failed` shows its text on screen because it needs the user to act; the rest announce to assistive technology. :::preview{title="The delivery ladder"}
Sending this one… Sent to the server. Delivered to their device. They have read this. This one did not make it.
::: :::source{language="blade"} Sending this one… Sent to the server. Delivered to their device. They have read this. This one did not make it. ::: ```blade {{-- 1. Bind the rung to whatever your model already tracks --}} {{ $message->body }} ``` Pair `failed` with a retry control in the `actions` slot. ### Delivery time Pass `statusTime` and the status glyph carries a tooltip with the exact moment β€” "Read at 9:15 AM". The time is also woven into the glyph's accessible text, so a screen reader hears it without the (mouse-only) hover. Hover the checks below: :::preview{title="Status time on hover"}
Delivered β€” hover the checks. Read β€” hover the checks.
::: :::source{language="blade"} Delivered β€” hover the checks. Read β€” hover the checks. ::: ## Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `author` | `array` | `[]` | Author data: `name`, `avatar` (URL), `role` | | `timestamp` | `Carbon\|string` | `null` | Message timestamp | | `timeFormat` | `string\|null` | `null` | Carbon format string for the timestamp. Default renders the locale-aware short time (`9:15 PM` for English, `21:15` for German and other 24-hour locales). Pass e.g. `H:i` to force a format. | | `side` | `string` | `'left'` | Alignment: `left` (incoming) or `right` (outgoing) | | `status` | `string\|null` | `null` | Delivery status for a sent message: `'sending'`, `'sent'`, `'delivered'`, `'read'`, `'failed'`. Each rung carries its own text β€” never conveyed by color alone. | | `statusTime` | `Carbon\|string\|null` | `null` | When the status was reached β€” adds a tooltip and an accessible "Read at 9:15 AM" text on the glyph. | | `intent` | `string` | `'neutral'` | Bubble color intent: `primary`, `neutral`, `info`, `success`, `warning`, `danger`. `primary` and `info` render identically (both tint with `--color-wk-accent`). See [Variants & Intents](../variants-and-intents.md) for the cross-component reference. | | `actionsReveal` | `string` | `'hover'` | How the `actions` slot is revealed: `hover` (visible on hover or keyboard focus) or `always` (always visible β€” the accessible choice for touch devices, which have no hover). | | `edited` | `bool` | `false` | Show "(edited)" indicator | ## Slots | Slot | Description | |------|-------------| | default | Message body content | | `reactions` | Reaction buttons below the bubble | | `attachments` | File or media attachments | | `actions` | Hover-revealed action menu | ## Accessibility - `
` root element - `aria-labelledby` links to the message header (author + timestamp) - Semantic `