---
title: MessageList
description: MessageList
element: vaadin-message-list
---

## Description

`<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>

### Example

To create a new message list, add the component to the page:

```html
<vaadin-message-list></vaadin-message-list>
```

Provide the messages to the message list with the [`items`](/elements/vaadin-message-list#items) property.

```js
document.querySelector('vaadin-message-list').items = [
  { text: 'Hello list', time: 'yesterday', userName: 'Matt Mambo', userAbbr: 'MM', userColorIndex: 1 },
  { text: 'Another message', time: 'right now', userName: 'Linsey Listy', userAbbr: 'LL', userColorIndex: 2, userImg: '/static/img/avatar.jpg' }
];
```

### Styling

The following shadow DOM parts are available for styling:

Part name | Description
----------|----------------
`list`    | The container wrapping messages.

See the [`<vaadin-message>`](/elements/vaadin-message) documentation for the available
state attributes and stylable shadow parts of message elements.

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### announceMessages

**Type:** `boolean | undefined`

When set to `true`, new messages are announced to assistive technologies using ARIA live regions.

### items

**Type:** `MessageListItem[] | null | undefined`

An array of objects which will be rendered as messages.
The message objects can have the following properties:
```js
Array<{
  text: string,
  time: string,
  userName: string,
  userAbbr: string,
  userImg: string,
  userColorIndex: number,
  className: string,
  theme: string,
  attachments: Array<{
    name: string,
    url: string,
    type: string
  }>
}>
```

When a message has attachments, they are rendered in the message's shadow DOM.
Image attachments (type starting with "image/") show a thumbnail preview,
while other attachments show a document icon with the file name.
Clicking an attachment dispatches an `attachment-click` event.

See also: [MessageListItem](#messagelistitem)

### markdown

**Type:** `boolean | undefined`

When set to `true`, the message text is parsed as Markdown.

## Events

### attachment-click

**Type:** [MessageListAttachmentClickEvent](#messagelistattachmentclickevent)

Fired when an attachment is clicked.

## Types

### MessageAttachment

```ts
export interface MessageAttachment {
  name?: string;
  url?: string;
  type?: string;
}
```

### MessageListAttachmentClickEvent

```ts
/**
 * Fired when an attachment is clicked in a message list item.
 */
export type MessageListAttachmentClickEvent = CustomEvent<{ attachment: MessageAttachment; item: MessageListItem }>;
```

### MessageListItem

```ts
export interface MessageListItem {
  text?: string;
  time?: string;
  userName?: string;
  userAbbr?: string;
  userImg?: string;
  userColorIndex?: number;
  theme?: string;
  className?: string;
  attachments?: MessageAttachment[];
}
```