Message | Lime design system

Examples

A done task

Move $50 to Vacation fund.

Done. Vacation fund is now $290.

A question back

Send Maya $40.

From Checking or from Savings?

When to use it

Use: Each turn in a chat between a person and an assistant.
Use: A request and its answer, in order, with copy and retry under the answer.
Not for: A step the assistant took. Use Tool call.
Not for: The assistant asking before it moves money. Use Approval request.
Not for: Something the assistant noticed without being asked. Use Insight.
Not for: A comment thread between people, with names and times. Build it from Avatar and text.
Not for: A notice or an error banner. Use an alert.

8 rules

Must: Leave the assistant answer as plain text without a bubble. Because the grey bubble marks the person's own turns, so a boxed answer blurs who said what.
Must: Pass actions only on an assistant message; they sit under the answer. Because Message drops actions when from="user", so they never render.
Should: Pass the assistant product name as name so screen readers say who is speaking.
Never: Add a rail, timestamp or read receipt to every turn. Because a line of metadata under each turn doubles the scroll and buries the answers.
Never: Widen an answer past the 65 character measure. Because past max-w-prose the eye loses its place on the way back to each line start.
Must: Add a visually hidden "You: " before a user message. Because Message reads the assistant name aloud but says nothing before a user turn.
Never: Render a message with no children. Because an empty turn still reads the assistant name aloud and leaves a blank gap.
Should: Show a failed step as a Tool call in failed state or a line of text; Message has no error state.

4 checks

: The assistant answer starts with its name for screen readers only; a user message has none, so add a hidden speaker word.
: Put turns in a list inside a scrolling region.
: The user bubble is a fill with no border and may lose its shape in forced colors; the text stays readable.
: Action buttons are 32px and need aria-labels.

6 edge cases

Long answer: Wraps at 65 characters; a long URL breaks anywhere.
Narrow container: The text wraps; the user bubble caps at 85%.
Right to left: Sides follow the writing direction; the squared corner is logical.
One-word user message: A small bubble at the end edge.
Streaming answer: Render children as they arrive; the layout grows down with no jump.
Stacked turns: Use a flex column with 20px gaps in a scrolling region.

3 props

6 tokens