Message List Styling

Styling API reference for the Message List component.

Style Variants
Styling Individual Messages
Style Properties
CSS Selectors

Style Variants

The following style variants are supported by Message List:

Variant Description Supported by

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

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

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

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.

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.

Open in a
new tab

Source code

MessageListBubble.javapackage com.vaadin.demo.component.messages;

import java.time.Instant;
import java.time.temporal.ChronoUnit;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.messages.MessageList;
import com.vaadin.flow.component.messages.MessageListItem;
import com.vaadin.flow.component.messages.MessageListItemVariant;
import com.vaadin.flow.component.messages.MessageListVariant;
import com.vaadin.flow.router.Route;

@Route("message-list-bubble")
public class MessageListBubble extends Div {

    public MessageListBubble() {
        Instant yesterday = Instant.now().minus(1, ChronoUnit.DAYS);
        Instant fiftyMinsAgo = Instant.now().minus(50, ChronoUnit.MINUTES);
        Instant fortyMinsAgo = Instant.now().minus(40, ChronoUnit.MINUTES);

        // tag::snippet[]
        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);
        // end::snippet[]
    }

}
message-list-bubble.tsximport React from 'react';
import { format, subDays, subMinutes } from 'date-fns';
import { MessageList } from '@vaadin/react-components/MessageList.js';

function Example() {
  const isoMinutes = 'yyyy-MM-dd HH:mm';
  const yesterday = format(subDays(new Date(), 1), isoMinutes);
  const fiftyMinutesAgo = format(subMinutes(new Date(), 50), isoMinutes);
  const fortyMinutesAgo = format(subMinutes(new Date(), 40), isoMinutes);

  return (
    // tag::snippet[]
    <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,
        },
      ]}
    />
    // end::snippet[]
  );
}

message-list-bubble.tsimport '@vaadin/message-list';
import { format, subDays, subMinutes } from 'date-fns';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('message-list-bubble')
export class Example extends LitElement {
  private isoMinutes = 'yyyy-MM-dd HH:mm';
  private yesterday = format(subDays(new Date(), 1), this.isoMinutes);
  private fiftyMinutesAgo = format(subMinutes(new Date(), 50), this.isoMinutes);
  private fortyMinutesAgo = format(subMinutes(new Date(), 40), this.isoMinutes);

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
      <!-- end::snippet[] -->
    `;
  }
}

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.

Open in a
new tab

Source code

MessageListOneToOne.javapackage com.vaadin.demo.component.messages;

import java.time.Instant;
import java.time.temporal.ChronoUnit;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.messages.MessageList;
import com.vaadin.flow.component.messages.MessageListItem;
import com.vaadin.flow.component.messages.MessageListItemVariant;
import com.vaadin.flow.component.messages.MessageListVariant;
import com.vaadin.flow.router.Route;

@Route("message-list-one-to-one")
public class MessageListOneToOne extends Div {

    public MessageListOneToOne() {
        Instant fiveMinsAgo = Instant.now().minus(5, ChronoUnit.MINUTES);
        Instant fourMinsAgo = Instant.now().minus(4, ChronoUnit.MINUTES);

        // tag::snippet[]
        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);
        // end::snippet[]
    }

}
message-list-one-to-one.tsximport React from 'react';
import { format, subMinutes } from 'date-fns';
import { MessageList, type MessageListItem } from '@vaadin/react-components/MessageList.js';

function Example() {
  const isoMinutes = 'yyyy-MM-dd HH:mm';
  const fiveMinutesAgo = format(subMinutes(new Date(), 5), isoMinutes);
  const fourMinutesAgo = format(subMinutes(new Date(), 4), isoMinutes);

  // tag::snippet[]
  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 />;
  // end::snippet[]
}

message-list-one-to-one.tsimport '@vaadin/message-list';
import { format, subMinutes } from 'date-fns';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import type { MessageListItem } from '@vaadin/message-list';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('message-list-one-to-one')
export class Example extends LitElement {
  private isoMinutes = 'yyyy-MM-dd HH:mm';
  private fiveMinutesAgo = format(subMinutes(new Date(), 5), this.isoMinutes);
  private fourMinutesAgo = format(subMinutes(new Date(), 4), this.isoMinutes);

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  // tag::snippet[]
  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>
    `;
  }
  // end::snippet[]
}

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:

Open in a
new tab

Source code

MessageListClassName.javapackage com.vaadin.demo.component.messages;

import java.time.Instant;
import java.time.LocalDateTime;
import java.time.ZoneOffset;
import java.util.Arrays;

import com.vaadin.demo.domain.DataService;
import com.vaadin.demo.domain.Person;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.messages.MessageList;
import com.vaadin.flow.component.messages.MessageListItem;
import com.vaadin.flow.router.Route;

@Route("message-list-class-name")
public class MessageListClassName extends Div {

    public MessageListClassName() {
        // tag::snippet[]
        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);
        // end::snippet[]
    }

}
message-list-class-name.cssvaadin-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)";
}
message-list-class-name.css
message-list-class-name.tsximport React, { useEffect } from 'react';
import { format, subDays, subMinutes } from 'date-fns';
import { useSignal } from '@vaadin/hilla-react-signals';
import { MessageList } from '@vaadin/react-components/MessageList.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';

function Example() {
  const person = useSignal<Person | undefined>(undefined);

  useEffect(() => {
    getPeople({ count: 1 }).then(({ people }) => {
      person.value = people[0];
    });
  }, []);

  const isoMinutes = 'yyyy-MM-dd HH:mm';
  const yesterday = format(subDays(new Date(), 1), isoMinutes);
  const fiftyMinutesAgo = format(subMinutes(new Date(), 50), isoMinutes);
  return (
    // tag::snippet[]
    <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',
        },
      ]}
    />
    // end::snippet[]
  );
}

message-list-class-name.cssvaadin-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)";
}
message-list-class-name.css
message-list-class-name.tsimport '@vaadin/message-list';
import { format, subDays, subMinutes } from 'date-fns';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import { applyTheme } from 'Frontend/demo/theme';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';

@customElement('message-list-class-name')
export class Example extends LitElement {
  private person: Person | undefined;
  private isoMinutes = 'yyyy-MM-dd HH:mm';
  private yesterday = format(subDays(new Date(), 1), this.isoMinutes);
  private fiftyMinutesAgo = format(subMinutes(new Date(), 50), this.isoMinutes);

  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override async firstUpdated() {
    const { people } = await getPeople({ count: 1 });
    this.person = people[0];
    this.requestUpdate();
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <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>
      <!-- end::snippet[] -->
    `;
  }
}
message-list-class-name.cssvaadin-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)";
}
message-list-class-name.css

In a list with the bubble variant, use the self variant for the messages of the current user instead.

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 for more information on style properties.

Property Supported by

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

--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

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 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.

List

Root element: vaadin-message-list
Internal list layout: vaadin-message-list::part(list)

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)

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)

Avatars

Avatar: vaadin-message > vaadin-avatar
Avatar icon: vaadin-message > vaadin-avatar::part(icon)
Avatar abbreviation: vaadin-message > vaadin-avatar::part(abbr)

Typing Indicator Flow

Typing indicator: vaadin-message[typing-indicator]
Typing user avatars: vaadin-message[typing-indicator] > vaadin-avatar-group

Docs

Docs

Message List Styling

Style Variants

Chat Bubbles

One-to-One Conversations

Styling Individual Messages

Style Properties

CSS Selectors

List

Message

Attachments

Avatars

Typing Indicator Flow