> Markdown version of [Styling](https://vaadin.com/docs/latest/components/message-list/styling). Section index: [llms.txt](https://vaadin.com/docs/latest/components/llms.txt)

# Message List Styling

## <a id="style-variants"></a>Style Variants (new in V25.3)

The following style variants are supported by Message List:

| Variant      | Description                                                                                                                         | Supported by |
| ------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `bubble`     | Shows the messages as chat bubbles                                                                                                  | Aura, Lumo   |
| `one-to-one` | Hides the avatars and names of all messages, for a conversation between two participants. Takes effect only together with `bubble`. | Aura, Lumo   |

The following style variants are supported by individual messages. They take effect only when the list uses the `bubble` variant:

| Variant      | Description                                                                                                                    | Supported by |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------ | ------------ |
| `self`       | Shows the message as sent by the current user: aligned to the end, tinted with the user color, and without the avatar and name | Aura, Lumo   |
| `full-width` | Removes the bubble and the width restriction, for example for the responses of an AI assistant                                 | Aura, Lumo   |

The message variants are applied to the items, not to the list: in Flow with `addThemeVariants()` on `MessageListItem` and the `MessageListItemVariant` constants, and in Lit and React with the `theme` property of an item.

### <a id="chat-bubbles"></a>Chat Bubbles

The `bubble` variant shows each message in a bubble that fits its content, with the avatar next to it. Apply the `self` variant to the messages of the current user. Their bubbles are aligned to the end of the list and tinted with the user color, which is the same color that the user color index gives the avatar. The variant also hides the avatar and name, but screen readers still announce the name.

**Lit** — `message-list-bubble.ts`

```html
<vaadin-message-list
  theme="bubble"
  .items="${[
    {
      text: 'Linsey, could you check if the details with the order are okay?',
      time: this.yesterday,
      userName: 'Matt Mambo',
      userColorIndex: 1,
    },
    {
      text: 'All good. Ship it.',
      time: this.fiftyMinutesAgo,
      userName: 'Linsey Listy',
      userColorIndex: 2,
      /* A message sent by the current user */
      theme: 'self',
    },
    {
      text: 'Great, the customer will be glad to hear that.',
      time: this.fortyMinutesAgo,
      userName: 'Sam Swanson',
      userColorIndex: 3,
    },
  ]}"
></vaadin-message-list>
```

**Flow** — `MessageListBubble.java`

```java
MessageList list = new MessageList();
list.addThemeVariants(MessageListVariant.BUBBLE);

MessageListItem message1 = new MessageListItem(
        "Linsey, could you check if the details with the order are okay?",
        yesterday, "Matt Mambo");
message1.setUserColorIndex(1);

// A message sent by the current user
MessageListItem message2 = new MessageListItem("All good. Ship it.",
        fiftyMinsAgo, "Linsey Listy");
message2.setUserColorIndex(2);
message2.addThemeVariants(MessageListItemVariant.SELF);

MessageListItem message3 = new MessageListItem(
        "Great, the customer will be glad to hear that.", fortyMinsAgo,
        "Sam Swanson");
message3.setUserColorIndex(3);

list.setItems(message1, message2, message3);
add(list);
```

**React** — `message-list-bubble.tsx`

```tsx
<MessageList
  theme="bubble"
  items={[
    {
      text: 'Linsey, could you check if the details with the order are okay?',
      time: yesterday,
      userName: 'Matt Mambo',
      userColorIndex: 1,
    },
    {
      text: 'All good. Ship it.',
      time: fiftyMinutesAgo,
      userName: 'Linsey Listy',
      userColorIndex: 2,
      // A message sent by the current user
      theme: 'self',
    },
    {
      text: 'Great, the customer will be glad to hear that.',
      time: fortyMinutesAgo,
      userName: 'Sam Swanson',
      userColorIndex: 3,
    },
  ]}
/>
```

### <a id="one-to-one-conversations"></a>One-to-One Conversations

In a conversation between two participants, such as a chat with an AI assistant, the position of a message already tells who sent it. The `one-to-one` variant hides the avatars and names of all messages, while the `self` variant keeps the messages of the current user aligned to the end. As with the `self` variant, screen readers still announce the names.

The `full-width` variant removes the bubble and the width restriction from a message. Use it for the responses of an AI assistant, which are often long and formatted with [Markdown](https://vaadin.com/docs/latest/components/message-list.md#markdown).

**Lit** — `message-list-one-to-one.ts`

```typescript
private items: MessageListItem[] = [
    {
      text: 'Which orders are still waiting for shipment?',
      time: this.fiveMinutesAgo,
      userName: 'Linsey Listy',
      theme: 'self',
    },
    {
      text: `These orders are waiting for shipment:

- **#1042**, paid yesterday
- **#1043**, paid today
- **#1045**, waiting for stock

The first two can ship today. Order #1045 ships when the missing items arrive.`,
      time: this.fourMinutesAgo,
      userName: 'Assistant',
      theme: 'full-width',
    },
  ];

  protected override render() {
    return html`
      <vaadin-message-list
        theme="bubble one-to-one"
        .items="${this.items}"
        markdown
      ></vaadin-message-list>
    `;
  }
```

**Flow** — `MessageListOneToOne.java`

```java
MessageList list = new MessageList();
list.addThemeVariants(MessageListVariant.BUBBLE,
        MessageListVariant.ONE_TO_ONE);
list.setMarkdown(true);

MessageListItem prompt = new MessageListItem(
        "Which orders are still waiting for shipment?", fiveMinsAgo,
        "Linsey Listy");
prompt.addThemeVariants(MessageListItemVariant.SELF);

MessageListItem response = new MessageListItem(
        """
                These orders are waiting for shipment:

                - **#1042**, paid yesterday
                - **#1043**, paid today
                - **#1045**, waiting for stock

                The first two can ship today. Order #1045 ships when the missing items arrive.
                """,
        fourMinsAgo, "Assistant");
response.addThemeVariants(MessageListItemVariant.FULL_WIDTH);

list.setItems(prompt, response);
add(list);
```

**React** — `message-list-one-to-one.tsx`

```tsx
const items: MessageListItem[] = [
    {
      text: 'Which orders are still waiting for shipment?',
      time: fiveMinutesAgo,
      userName: 'Linsey Listy',
      theme: 'self',
    },
    {
      text: `These orders are waiting for shipment:

- **#1042**, paid yesterday
- **#1043**, paid today
- **#1045**, waiting for stock

The first two can ship today. Order #1045 ships when the missing items arrive.`,
      time: fourMinutesAgo,
      userName: 'Assistant',
      theme: 'full-width',
    },
  ];

  return <MessageList theme="bubble one-to-one" items={items} markdown />;
```

## <a id="styling-individual-messages"></a>Styling Individual Messages

You can style individual messages by adding a class name to some items and providing CSS for that class name. The following example shows how to highlight the current user’s own messages:

`message-list-class-name.css`

```css
vaadin-message.current-user {
    --vaadin-message-name-color: #fff;
    --vaadin-message-text-color: #fff;
    --vaadin-message-time-color: #fff;
    background-color: #000;
    border: 2px solid #fff;
    border-radius: 9px;
    font-weight: 900;
}
vaadin-message.current-user::part(name) {
    font-weight: 900;
}
vaadin-message.current-user::part(name)::after{
    content: " (You)";
}
```

**Lit** — `message-list-class-name.ts`

```html
<vaadin-message-list
  .items="${[
    {
      text: 'Linsey, could you check if the details with the order are okay?',
      time: this.yesterday,
      userName: 'Matt Mambo',
      userColorIndex: 1,
    },
    {
      text: 'All good. Ship it.',
      time: this.fiftyMinutesAgo,
      userName: 'Linsey Listy',
      userColorIndex: 2,
      userImg: this.person ? this.person.pictureUrl : undefined,
      /* Add custom class name */
      className: 'current-user',
    },
  ]}"
></vaadin-message-list>
```

**Flow** — `MessageListClassName.java`

```java
Person person = DataService.getPeople(1).get(0);
MessageList list = new MessageList();

Instant yesterday = LocalDateTime.now(ZoneOffset.UTC).minusDays(1)
        .toInstant(ZoneOffset.UTC);
MessageListItem message1 = new MessageListItem(
        "Linsey, could you check if the details with the order are okay?",
        yesterday, "Matt Mambo");
message1.setUserColorIndex(1);

Instant fiftyMinsAgo = LocalDateTime.now(ZoneOffset.UTC)
        .minusMinutes(50).toInstant(ZoneOffset.UTC);
MessageListItem message2 = new MessageListItem("All good. Ship it.",
        fiftyMinsAgo, "Linsey Listy", person.getPictureUrl());
message2.setUserColorIndex(2);
// Add custom class name
message2.addClassNames("current-user");

list.setItems(Arrays.asList(message1, message2));
add(list);
```

**React** — `message-list-class-name.tsx`

```tsx
<MessageList
  items={[
    {
      text: 'Linsey, could you check if the details with the order are okay?',
      time: yesterday,
      userName: 'Matt Mambo',
      userColorIndex: 1,
    },
    {
      text: 'All good. Ship it.',
      time: fiftyMinutesAgo,
      userName: 'Linsey Listy',
      userColorIndex: 2,
      userImg: person.value?.pictureUrl,
      className: 'current-user',
    },
  ]}
/>
```

In a list with the `bubble` variant, use the [`self` variant](#chat-bubbles) for the messages of the current user instead.

## <a id="style-properties"></a>Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the `html {…​}` selector. See [Component Style Properties](https://vaadin.com/docs/latest/styling/styling-components.md#component-style-properties) for more information on style properties.

| Property                                    | Supported by |
| ------------------------------------------- | ------------ |
| `--vaadin-message-attachment-background`    | Aura, Lumo   |
| `--vaadin-message-attachment-border-color`  | Aura, Lumo   |
| `--vaadin-message-attachment-border-radius` | Aura, Lumo   |
| `--vaadin-message-attachment-border-width`  | Aura, Lumo   |
| `--vaadin-message-attachment-font-size`     | Aura         |
| `--vaadin-message-attachment-font-weight`   | Aura, Lumo   |
| `--vaadin-message-attachment-gap`           | Aura, Lumo   |
| `--vaadin-message-attachment-line-height`   | Aura, Lumo   |
| `--vaadin-message-attachment-padding`       | Aura, Lumo   |
| `--vaadin-message-attachment-text-color`    | Aura         |
| `--vaadin-message-attachments-alignment`    | Aura, Lumo   |
| `--vaadin-message-content-background`       | Aura, Lumo   |
| `--vaadin-message-content-border-radius`    | Aura, Lumo   |
| `--vaadin-message-content-padding`          | Aura, Lumo   |
| `--vaadin-message-font-size`                | Aura, Lumo   |
| `--vaadin-message-font-weight`              | Aura, Lumo   |
| `--vaadin-message-gap`                      | Aura, Lumo   |
| `--vaadin-message-header-line-height`       | Aura, Lumo   |
| `--vaadin-message-line-height`              | Aura, Lumo   |
| `--vaadin-message-list-max-width`           | Aura, Lumo   |
| `--vaadin-message-list-padding`             | Aura, Lumo   |
| `--vaadin-message-name-color`               | Aura, Lumo   |
| `--vaadin-message-name-font-size`           | Aura, Lumo   |
| `--vaadin-message-name-font-weight`         | Aura, Lumo   |
| `--vaadin-message-padding`                  | Aura, Lumo   |
| `--vaadin-message-text-color`               | Aura, Lumo   |
| `--vaadin-message-time-color`               | Aura, Lumo   |
| `--vaadin-message-time-font-size`           | Aura, Lumo   |
| `--vaadin-message-time-font-weight`         | Aura, Lumo   |
| `--vaadin-message-user-color`               | Aura, Lumo   |

## <a id="css-selectors"></a>CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the [Styling documentation](https://vaadin.com/docs/latest/styling.md) for more details on how to style components.

> **Important: Not for Shadow DOM**
>
> These selectors should be used in `styles.css` or another stylesheet loaded with the `@StyleSheet` annotation or the `@import` CSS rule. **They do not work in the shadow DOM of Vaadin components**, such as in stylesheets in the `components` sub-folder or loaded with the `@CssImport` annotation’s `themeFor` property.

---

### <a id="list"></a>List

- Root element

  `vaadin-message-list`

- Internal list layout

  `vaadin-message-list::part(list)`

### <a id="message"></a>Message

- Root element

  `vaadin-message`

- Focused message

  `vaadin-message[focused]`

- Keyboard focused message

  `vaadin-message[focus-ring]`

- Text content layout

  `vaadin-message::part(content)`

- Header row

  `vaadin-message::part(header)`

- Name

  `vaadin-message::part(name)`

- Timestamp

  `vaadin-message::part(time)`

- Message text

  `vaadin-message::part(message)`

#### <a id="attachments"></a>Attachments

- Attachments container

  `vaadin-message::part(attachments)`

- Attachment button

  `vaadin-message::part(attachment)`

- Image attachment button

  `vaadin-message::part(attachment attachment-image)`

- File attachment button

  `vaadin-message::part(attachment attachment-file)`

- Image thumbnail

  `vaadin-message::part(attachment-preview)`

- File icon

  `vaadin-message::part(attachment-icon)`

- File name

  `vaadin-message::part(attachment-name)`

#### <a id="avatars"></a>Avatars

- Avatar

  `vaadin-message > vaadin-avatar`

- Avatar icon

  `vaadin-message > vaadin-avatar::part(icon)`

- Avatar abbreviation

  `vaadin-message > vaadin-avatar::part(abbr)`

#### <a id="typing-indicator-flow"></a>Typing Indicator Flow (new in V25.3)

- Typing indicator

  `vaadin-message[typing-indicator]`

- Typing user avatars

  `vaadin-message[typing-indicator] > vaadin-avatar-group`