Proximus design system
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:

  1. Information message
    Gives short additional informations about a topic within the page.
  2. 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.
  3. 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.
  4. Warning message
    Triggered when user is about to do a destructive action such as: deletion, non-reversible modification, etc.
  5. On going message
    Displayed to give a feedback to the user when a process has started but has not finished running.
  6. 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:

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

  1. Indicator type color
    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.
    • Information
    • Success
    • Error
    • Warning
    • On going
    • Congratulation
  4. Title
    Title give the user the context about the message box, it should be short and descriptive, explaining the most important piece of information.
  5. 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.
  6. 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.
  7. 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.

  1. Use dismissible message boxes when the information has been acknowledged and the message is no longer relevant.
  2. 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 ""
This is the title

This is the message

Tertiary button

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

Success title without close

This is the message

Error

This is the title

This is the message

Warning

This is the title

This is the message

Ongoing

This is the title

This is the message

Congratulation

This is the title

This is the message

Negative version

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

This is the title

This is the message

Success / Confirmation

This is the title

This is the message

Error

This is the title

This is the message

Warning

This is the title

This is the message

Ongoing

This is the title

This is the message

Congratulation

This is the title

This is the message


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.

This is the title

This is the message


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