Proximus design systemDev
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.

Toaster

Toaster is a kind of overlayer coming from the left edge of the screen on desktop and from the bottom edge on mobile.

last modified: 01/01/1601 01:00:00

Overview

The toaster appears over the parent page with a transparent black and blurred background. The toaster is a modal container meaning it disables all page functionality when it appears. Toaster remain on screen until the required action has been completed or it is manually closed. The toaster opens up from the bottom in mobile and from the left in desktop.
This component is similar to the drawer component (app only).

Desktop
Mobile

Toaster versus Overlayers

A toaster could also be compared to an overlayer as it also interrupts the current flow to:

  1. Grab the user's attention
  2. Get user input

There is one main difference:

  1. A toaster opens up by sliding from the bottom (in mobile) and the left (desktop).
  2. The toaster is less intrusive as it's not centered in the screen and still shows the parent page.

See our Overlayer article for more guidance on the component.

Anatomy

  1. Title

  2. Subtitle (optional)

  3. Content (optional)

  4. Visual (optional)

  5. Separator

  6. Buttons (optional)
    Primary, secondary, tertiary buttons. One or multiple.

  7. Close button

  8. Toaster container

  9. Background page
    Background of the parent page with a transparent and blurred black background.

Using components

Appropriate components to use in a toaster include form inputs and controls that aid in collecting information from the user. Other components like content switcher and structured list can be used to organize information. When possible, avoid using complex components that can complicate task completion or prolong a user's time in the modal.
A user's journey through the modal should be direct and short.

Avoid components that will direct the user away from the dialog

Avoid components like links that will take the user away from the current context and the task at hand. A toaster's purpose is to focus the user's attention on a particular task and should not encourage any action that is not related to that task's completion.

Avoid components that hide information

When possible avoid components that hide information or choices from the user - like accordion and tabs - and require additional effort from the user to discover all the available content. Time spent in a modal should be minimal and only information needed to complete the task should be included. If there is too much information for a user to consume in a dialog context, consider using a full page instead.

Don't nest modals

As modals cannot be nested, do not use all the interruptive components: overlayer, action menu, toaster, popover, dropdown, etc.

Avoid complex interactions with data tables

When possible avoid using a data table in a overlayer as it's a complex component with its own workflow and decision making that can overly complicate a user's choice and task completion in relation to the overlayer.
If a data table is necessary then the tables should be kept as simple as possible with limited interactions. For example, you can use data table to make selections that will be incurred by the dialogs action but don't preform table functions like batch editing or batch actions inside the modal itself.

Do
Keep data table interaction simple.

Don't
Don't include complex interactions in data tables.

Close vs Cancel

When the system requires a user's decision the choices are often split between going further or dismissing the current task. If in such a situation, the close button will disappear to focus the user's attention on the buttons. In other words, when there is a cancel button, there is no close button.

Behaviour

Position

Overlayers retain focus until dismissed or an action, such as choosing a setting, has been taken. They shouldn't be obscured by other elements.

In mobile, the toaster slides from the bottom and covers a maximum height of 90% of the screen. In desktop, it slides from the left of the screen and covers 75% of the screen's width.

Desktop
Mobile

Max height and scrolling

Each toaster has a max width/height in order to maintain a proper window ratio. When the toaster content is longer than the toaster height, a vertical scroll is automatically added on the modal content with the header and footer areas remaining fixed in place.

If the toaster height doesn't have enough space then this is an indicator that a full page may be needed instead.

Toasters don't scroll with elements outside of the dialog, such as the background.

Escaping toasters

Toasters may be dismissed by:

  • Cancel button
  • Close button
  • Click outside the overlayer
  • Completing the flow
last modified: 01/01/1601 01:00:00

Sizes and colors

last modified: 01/01/1601 01:00:00
Accessibility
  • rs-toaster section must have role="dialog" attribute;
  • rs-toaster section must have aria-describedby="ac-toaster-label" with the id of the toaster title;
  • rs-tmline-indicator-el which has a number inside needs a second <span> with an explicite aria-label attribute.
How does it work

Toaster is a webcomponent which needs data-rslib-webcomponent-load="rslib.apps.toaster" attribute to work.

Default toaster

The toaster section has a rs-toaster class and must have an id="ac-toaster-positive" to run the JavaScript.

The toaster is opened by a <button> with the jsrs-toaster class + data-toaster-id="ac-toaster-positive" attribute with the toaster section id to run the JavaScript.

Negative toaster

Add rs-toaster-neg to rs-toaster .

Attention

Be careful this negative component doesn't take care of the element inside it. You have to add negative classes on your elements inside the negative toaster.

JavaScript

How to trigger the js

As Toaster is a webcomponent, you will have to load inception.webComponentLoad(CONTEXT); first to be able to load the scripts.

Next time you add Toaster to the page, you have to call this JS: inception.toaster(CONTEXT);

CONTEXT refers to document or html element parent.

Dispatched event

Toaster has dispatch event that you can trigger

  • Open: element.addEventListener('inception.toaster.open', fn). What you write inside fn of your eventListener will be triggered when the toaster is opening.
  • Opened: element.addEventListener('inception.toaster.opened', fn). What you write inside fn of your eventListener will be triggered when the toaster is opened.
  • Close: element.addEventListener('inception.toaster.close', fn). What you write inside fn of your eventListener will be triggered when the toaster is closing.
  • Closed: element.addEventListener('inception.toaster.closed', fn). What you write inside fn of your eventListener will be triggered when the toaster is closed.