A chat is a module allowing you to display a discussion in real time.

General guidelines

A chat is an element that shows a written conversation and allows files to be exchanged between two or more people, being composed of various chat items. The use of each item must respect the standard display structure in the form of a chronological vertical list.

Sending a message may be allowed by simply pressing the “Enter/Return” key. An avatar with a status dot may be added to show user activity (see avatar).

Best practices

Always use the chat title to provide a context for the topic of discussion.
 Use chats only when they bring value.


Don’t be unclear about the purpose of the chat.


Always put the most recent messages on the list with the date they were sent.


Don’t put the last message at the top nor use a vertical timeline.


Stack up as a list if a user sends numerous messages in a row. If they are sent within a short amount of time and no other user message is sent at the same time, the send date will only be displayed below that last message.


Don’t put the time below each message.


The key item is the message element, it varies according to the nature of the message and/or the sender. A chat module includes several components.

1. Title

Should be concise and describe the aim of the chat module.

2. Description

If needed when the title is not sufficient.

3. Incoming Message

Incoming messages are used to display a message received by the chat user. It appears to the left of the chat window and is neutral in color.

4. Outgoing Message

Outgoing messages are used to display a message sent by the chat user. It appears to the right of the chat window and its color should be chosen from the primary color palette.

5. Typing awareness indicator  

An alternative version of this message exists, which is an animated bubble indicating that another user is currently typing a message. It is only used in this temporary situation to provide feedback in the discussion.

6. Message with Attachment

Whether the message is incoming or outgoing, any attachment must be shown in the bubble provided for that purpose.

7. Call to action buttons

This type of button can automatically pops when the incoming message involves an action.

Responsive behaviours
Code & Design assets

Request code and design assets for creating user interfaces.

Component overview

Component overview

Can I contribute to the System?

Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.

Back to top