---
tags:
---

# Message boxes

Message box is a dedicated space prompted to communicated informations to users.
## Usage
### Types

Depending on the type of informations, there are 5 type of messages:


1. **Information**
Gives short additional informations about a topic within the page. It can be triggered by a tooltip of a hyperlink.
2. **Confirmation**
Displayed to give a direct feedback to the user when ordering or activating something.
3. **Error**
Prompted when user input is incorrect, forbidden, or the system fails to operate a task. The error message helps the user by giving him the feedback about what error he encountered.
4. **Warning**
Triggered when user is about to do a destructive action such as: deletion, non-reversible modification, etc.
5. **Congratulation**
When the user input generates a promotions, a special offer or any other action that can trigger something additional than the initial request, congratulation message offers a neat solution to trigger some surprise and delight.

### States
**Basic state**

State visible before click. Container, Icon iformation, Primary label, Secondary label and close button


**Hover state**

State visible when the cursor hovers the box. the close button is displayed in another colour.


**Focused state**

When user navigates with the keyboard, focus indicates the close button as been selected.


## Anatomy


**1. Color type indicator**
Depending on the type of message, the color changes to clearly show which kind of message it is.
**2. Container**
Container is displayed around the icon indicator and content with a solid color.
**3. Icon indicator**
The icon shows clearly which kind of message is it. The icon indicator is displayed in the indicator type color.
**4. Title**
Title give the user the context about the message box, content should be short and concise.
**5. Description**
Desciption provide a more in-depth explanation over the message, it contains all the informations the users need to have in order to take the proper decisions.
**6. Text link (optional)**
Depending the message box, text link can be displayed to have more details about the message or to get redirected to a related page/action.
**7. close button (optional)**
Close button gives the possibility to the user to close the message.

## Style

**Size**


| | Mobile | Desktop |
| -------- | -------- | -------- |
| 1. Container paddings | 1 rem | 2 rem |
| 2. Container border | 0.1 rem|
| 3. Border radius | 0.5 rem|
| 4. close button | 2.5rem |
| 5.close button margin top & right | 1 rem|
| 6. indicator icon | 3.6 rem |
| 7. indicator marging right | 1 rem | 2 rem|
| 8. primary label | size 6 |
| 9. secondary label | size 4 |
| 10. type indication color | 0.5 rem | |

> [name=Laureen Delhaye]Size dispo ici: https://designsystem.proximus.com/pagesDS/10__Basics/Fonts/
> [name=diply] pour le 4 comment tu le met sur le tableau ? ou faut il faire un autre point pour le margin du close button ?
> > [name=Laureen Delhaye] Oui il faut faire un autre point

**Colors**

Light theme

| Types | Attribute | Container |
| -------- | -------- | -------- |
| All type of message box | Background <br> Border <br> Close button <br> Close button background| grey 2 <br> grey 4 <br> purple <br> grey 7 |
|1. Information | Color type indicator/Icon <br> Primary label <br> Secondary label | Purple <br> Purple <br> Black 9 |
|2.Confirmation | Color type indicator/Icon <br> Primary label <br> Secondary label | Success <br> Success <br> Black 9 |
|3.Error | Color type indicator/Icon <br> Primary label <br> Secondary label | Error <br> Error <br> Black 9 |
|4.Warning | Color type indicator/Icon <br> Primary label <br> Secondary label | Warning <br> Warning <br> Black 9 |
|5.Congratulation | Color type indicator/Icon <br> Primary label <br> Secondary label | Success <br> Success <br> Black 9 |
|6.Hover | Close button <br> close button background | hover <br> grey 5 |

Dark theme

| Types | Attribute | Container |
| -------- | -------- | -------- |
| All type of message box | Background <br> Border <br> Close button <br> close button background| white 20% transparency ??? <br> white 20% transparency ??? <br> White <br> Black 7 |
|1. Information | Color type indicator/Icon <br> Primary label <br> Secondary label | White <br> White <br> White |
|2.Confirmation | Color type indicator/Icon <br> Primary label <br> Secondary label | Success neg <br> Success neg <br> White |
|3.Error | Color type indicator/Icon <br> Primary label <br> Secondary label | Error neg<br> Error neg<br> White |
|4.Warning | Color type indicator/Icon <br> Primary label <br> Secondary label | Warning neg<br> Warning neg<br> White |
|5.Congratulation | Color type indicator/Icon <br> Primary label <br> Secondary label | Success neg <br> Success neg <br> White |
|6.Hover | close button <br> close button background | Hover neg <br> black 6 |