Important information:

Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Message box

See deprecated code
expiry date: 30/04/2021

Message box communicate information and provide immediate feedback to the user.

last modified: 15/02/2023 15:15:04

Types

Message boxes are intended to inform users about events in the pages. Depending on the type of message, there are 5 type of messages:

Information message
Gives short additional informations about a topic within the page.
Success message
Displayed to give a direct feedback to the user when ordering or activating something. This type of message is also used for a congratulations message, when the user's action triggers something positive or additional than the initial request. Congratulation message offers a neat solution to trigger some surprise and delight.
Error message
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.
Warning message
Triggered when user is about to do a destructive action such as: deletion, non-reversible modification, etc.
On going message
Displayed to give a feedback to the user when a process has started but has not finished running.
Congratulation message
When user's action offers a neat solution to trigger some surprise and delight.

Behaviours

Two behaviors are possible when displaying a message box:

Inline
Inline message boxes show up in task flows, to notify users of the status of an action. They usually appear at the top of the concerned content.
Overlayer
An overlayer message box appears in front of web page content to provide information or ask for a decision. Overlayers disable all page functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken. Dialogs are purposefully interruptive, so they should be used sparingly.
For more info about the overlayer behaviour, check out the overlayer article.

Anatomy

Indicator type color
Depending on the type of message, the color changes to clearly show which kind of message it is.
Container
Container is displayed around the icon indicator and content with a solid color.
Icon indicator
The icon shows clearly which kind of message is it. The icon indicator is displayed in the indicator type color.
- Information
- Success
- Error
- Warning
- On going
- Congratulation
Title
Title give the user the context about the message box, it should be short and descriptive, explaining the most important piece of information.
Content (optional)
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. Explain how to resolve the issue by including any troubleshooting actions or next steps. Be concise and avoid repeating or paraphrasing the title.
In the inline behavior, you can include a link or a button within the content that redirect the user to next steps. Limit action labels to one or two words.
Action(s) zone (overlayer behaviour)
In the overlayer behavior, you can include a button within the action zone that redirect the user to next steps.
Close action link (optional)
The close action link gives the possibility to the user to close the message. For more info about the close action link, check out the actions article.

Dismissible or persistent

Message boxes do not dismiss automatically. They persist on the page until the user dismisses them or takes action that resolves the notification.

The close action button in the top right corner is used to dismiss message boxes. Including the close button is optional and should not be included if it is critical for a user to read or interact with the notification.

Use dismissible message boxes when the information has been acknowledged and the message is no longer relevant.
Use persistent message boxes when the information continues to be relevant after the message is shown.

Best practices

Sizing

The width of message boxes varies based on content and layout. They can expand to the fill the container or content area they relate to. Their height is based on the content length, which should not exceed two lines of text.

Placement

Message boxes appear near their related items.

Related elements

Error message box vs empty state

Use error message box when :

There is no interaction between your interface and the user, and you need to display an error.
There is an interaction between your interface and the user, and you need to display an error regarding something else than an no result situation like the user has type a wrong text or has not complete everything.

Use empty state when :

There is an interaction between your interface and the user, and the users provide an input that return no results. The most common case is during searching and filtering results. If the query doesn't match with any result, the system will return an empty state.
More info about the empty state

last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 09/09/2022 09:30:04

Default message box

Accessibility

The following attributes must be present in the message box container:

aria-live="assertive"
role="alertdialog"

To create a message box, use the following @rsAlertBox objects.

Razor

All @rsAlertBox objects can receive the following parameters:

Name	Purpose	Default value
sTitle	Title	"This is the title"
sMessage	Content	"<p>This is the message</p>"
bCloseBtn	Show close button	true
bTitle	Show title	true
bMessage	Show content	true
sCloseLabel	Close label	"Close the message box"
bModal	Display as overlayer	false
sModalId	Overlayer ID	"msg-overlayer"
bModalSmall	Display as small overlayer	false
bModalFooter	Show footer	false
sModalFooterContent	Footer content	"<p>This is the footer</p>"
bModalUnclosable	Overlayer unclosable	false
sXtraClass	Add extra classes on the rs-msgbox div	""

All variants

Add the following classes to the element containing rs-msgbox :

rs-msgbox-success
rs-msgbox-error
rs-msgbox-warning
rs-msgbox-ongoing

Or simply use one of the helpers below:

Success / Confirmation

Error

Warning

Ongoing

Congratulation

Negative version

Add rs-msgbox-neg class to the element containing the rs-msgbox class

Success / Confirmation

Error

Warning

Ongoing

Congratulation

Message overlayers

Accessibility

The title element must have ID attribute ac-OverlayerID-label .
role='dialog' indicates the role of the component.
aria-labelledby='ac-OverlayerID-label' associates the label of the overlayer to the title.
For the focus trap, you need at least one clickable element ( <button> or <href> ), including the close button !
Closing the overlayer:
- title='Close the overlayer' attribute is added to a <span> to display a tooltip explaining the purpose of the close button.
- Within this <span> , an extra <span class="show-for-sr">Close the overlayer</span> is added so that screen readers can detect it.
- The copy has to be translated in the following languages:
  - EN: "Close the overlayer"
  - FR: "Fermer fenêtre"
  - NL: "Sluit venster"

Razor

aria-labelledby is automatically generated by the Overlayer ID .

Complex footer

All variants

To make use of different statuses, add the following classes to the <div> containing the rs-reveal-msgbox class:

rs-reveal-msgbox-success
rs-reveal-msgbox-error
rs-reveal-msgbox-warning

You will also need to add the corresponding classes to the <div> containing the rs-msgbox class:

rs-msgbox-success
rs-msgbox-error
rs-msgbox-warning
rs-msgbox-ongoing

To make the overlayer small, add class rs-reveal-modal-small to the <div> containing rs-reveal-modal .

Success / Confirmation

Error

Warning

Ongoing

Congratulation

Negative overlayers

Add class rs-reveal-msgbox-neg to the <div> containing rs-reveal-msgbox and class rs-msgbox-neg to the <div> containing rs-msgbox .

Success / Confirmation

Error

Warning

Ongoing

Congratulation

Angular

Using Angular?

Building your pages with Angular? Add the following attribute to the element containing class rs-msgbox :

data-ng-non-bindable

This will prevent the data-alert attribute from being misread as an Angular directive (due to mm-foundation), which would cause the DOM to be altered and, as a consequence, the layout would break.

JavaScript

Follow Overlayer JS rule for Message overlayer.

Deprecated

EXPIRY DATE: 30/04/2021

The message boxes below are not accessible and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

Class:

alert-box
rs-alert
rs-alert-login
rs-alert-confirm
rs-alert-error
rs-alert-info
rs-alert-cookie

Information message box

This is the message

Confirmation message box

This is the message

Warning message box

This is the message

Error message box

This is the error message

Congratulation message box

This is the message

last modified: 16/09/2022 12:45:14

Configuration metadata (GenericMessageBoxComponent)

Selector: lib-generic-message-box

Class: GenericMessageBoxComponent

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name	Type	Default	Required	Description
forwardText	string	null	No	The button label to the right(forward) place of the message box
backwardText	string	null	No	The button label to the left(backwards) place of the message box
showCross	boolean	undefined	No	Shows/Hides the cross(close button) for the top right of the message window
closeMessageBoxTranslation	string	Close the message box	No	The on:Hover cross label
isNegative	boolean	false	No	Defines light/dark style of the component
cypressTag	string	undefined	No	Automation test tag
messageType	MessageBoxTypesEnum	undefined	Yes	Defines the message box type

Outputs

Name	Type	Description
forwardEmitter	EventEmitter	Emits when forward button is clicked
backwardEmitter	EventEmitter	Emits when backward button is clicked
crossEmitter	EventEmitter	Emits when cross(close button) is clicked

Models

        export enum MessageBoxTypesEnum {
            Success,
            Error,
            Warning,
            Congratulation,
            Information
        }

Configuration metadata (OverlayerMessageComponent)

Selector: lib-overlayer-message

Class: OverlayerMessageComponent

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name	Type	Default	Required	Description
id	string	undefined	Yes	Component unique id
showModal	boolean	undefined	Yes	Component unique id
footerMainButtonLabel	string	false	No	Show/Hide the overlayer message box
footerMainButtonDisabled	boolean	false	No	Show/Hide the main(right) button from the footer
footerMainButtonCypresTag	string	null	No	Automation test tag for the main(right) button
footerSecondaryButtonLabel	string	null	No	The button label to the secondary(left) button of the message box
footerSecondaryButtonDisabled	boolean	false	No	Show/Hide the secondary(left) button from the footer
footerSecondaryButtonCypresTag	string	null	No	Automation test tag for the secondary(left) button
footerLinkButtonLabel	string	null	No	Automation test tag for the secondary(left) link button. No button rendering just a link.
footerLinkButtonCypresTag	string	null	No	Automation test tag for the secondary(left) link button
showCross	boolean	false	No	Shows/Hides the cross(close button) for the top right of the message window
closeMessageBoxTranslation	string	Close the overlayer	No	The on:Hover cross label
isNegative	boolean	false	No	Defines light/dark style of the component
small	boolean	false	No	Defines if the overlayes message box is small or normal size
cypressTag	string	undefined	No	Automation test tag for the whole component
messageType	MessageBoxTypesEnum	undefined	Yes	Defines the message box type

Outputs

Name	Type	Description
footerMainButtonClick	EventEmitter	Emits when footer main button is clicked
footerSecondaryButtonClick	EventEmitter	Emits when footer secondary button is clicked
footerLinkButtonClick	EventEmitter	Emits when footer secondary link button is clicked
onClose	EventEmitter<OverlayerMessageCloseTypeEnum>	Emits when the overlayer is closed. Also emits the way it was closed by cross, by ESC key or by clicking the backdrop.

Models

        export enum OverlayerMessageCloseTypeEnum {
            CROSS = 'CROSS',
            BACKGROUND = 'BACKGROUND',
            ESC = 'ESC',
        }

Configuration metadata (GenericLoadingMsgComponent)

Selector: app-generic-loading-msg

Class: GenericLoadingMsgComponent

Use case example

Inputs

None

Outputs

None

Models

None