---
id: "packages/active-ui/message"
title: "Message"
description: "The layout of a message in a conversation, with an avatar, a header, the content and a footer, on either side."
url: "/packages/active-ui/message"
locale: "en"
revision: "de50039222b6934a"
---

# Message

`Message` lays out one message of a conversation: the avatar of the sender, a header with the name
and time, the content, and a footer such as the delivery state. Messages from the other party sit on
the start side, your own on the end side. The text itself goes in a [bubble](/packages/active-ui/bubble);
a long conversation scrolls in a [message scroller](/packages/active-ui/message-scroller).

**Example: A conversation between two people**

Client: Runs entirely in your browser. Source: `examples/ui/message.tsx`.

```tsx
// apps/docs/examples/ui/message.tsx
'use client';

import {
  Avatar,
  AvatarFallback,
} from '@workspace/active-ui/components/primitives/avatar';
import {
  Bubble,
  BubbleContent,
} from '@workspace/active-ui/components/primitives/bubble';
import {
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageGroup,
  MessageHeader,
} from '@workspace/active-ui/components/primitives/message';

/**
 * A conversation laid out as messages: the other person on the start side
 * with an avatar and a name, your own messages on the end side, a header with
 * the time and a footer with the delivery state. The text sits in bubbles.
 */
export default function MessageExample() {
  return (
    <MessageGroup className="w-full max-w-md">
      <Message>
        <MessageAvatar>
          <Avatar size="sm">
            <AvatarFallback>SV</AvatarFallback>
          </Avatar>
        </MessageAvatar>
        <MessageContent>
          <MessageHeader>Sam de Vries · 10:42</MessageHeader>
          <Bubble variant="muted">
            <BubbleContent>
              Could you check the address of participant 1042 before Friday?
            </BubbleContent>
          </Bubble>
        </MessageContent>
      </Message>
      <Message align="end">
        <MessageContent>
          <MessageHeader>You · 10:45</MessageHeader>
          <Bubble align="end">
            <BubbleContent>Done, it was an old address.</BubbleContent>
          </Bubble>
          <Bubble align="end">
            <BubbleContent>
              The statement goes out with the others.
            </BubbleContent>
          </Bubble>
          <MessageFooter>Read</MessageFooter>
        </MessageContent>
      </Message>
    </MessageGroup>
  );
}
```

## Usage

```tsx
import {
  Bubble,
  BubbleContent,
} from '@workspace/active-ui/components/primitives/bubble';
import {
  Message,
  MessageContent,
  MessageHeader,
} from '@workspace/active-ui/components/primitives/message';

<Message align="end">
  <MessageContent>
    <MessageHeader>You · 10:45</MessageHeader>
    <Bubble align="end">
      <BubbleContent>Done, it was an old address.</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>;
```

## Anatomy

- `MessageGroup`: a column of messages with a gap.
- `Message`: one message. `align`: `start` (the default, the other party) or `end` (your own); the
  avatar and the content follow the side.
- `MessageAvatar`: the place for an [avatar](/packages/active-ui/avatar).
- `MessageContent`: the column with `MessageHeader`, the bubbles and `MessageFooter`, in small
  muted text.

## What your application provides

- The sender, the time (formatted with [active-format](/packages/active-format)), the content and
  the delivery state.
- The order and the grouping of consecutive messages of one sender.

## Accessibility

Messages are `<div>`s read in order. Put the sender and the time in the header so that each message
is understandable on its own; an avatar beside a visible name is decoration.

## API

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `align` | `"end" \| "start"` | no | The side of the message: `start` for the other party, `end` for your own. |

### Other parts

**MessageGroup**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

MessageGroup has no props of its own.

**MessageAvatar**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

MessageAvatar has no props of its own.

**MessageContent**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

MessageContent has no props of its own.

**MessageFooter**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

MessageFooter has no props of its own.

**MessageHeader**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |

MessageHeader has no props of its own.