Flash Message

Modeless, non-interactive message to alert the user of a status change.

How to

Flash messages are used to provide a quick feedback (e.g., to confirm a setting has been updated) to the user.

To connect a flash message to a trigger (e.g., a button), make sure the id value of the first one is equal to the value of the aria-controls of the second one.

To set a custom duration for the message, you can edit the data-duration attribute (set in milliseconds) of the .flash-message element.

If you need to show a flash message without a trigger element (e.g., you want to show the message as a consequence of user actions), you can use the 'showFlashMessage' custom event. 

Here's how you can use this custom event:

function showFlashMessage(element) {
  var event = new CustomEvent('showFlashMessage');
  element.dispatchEvent(event);
};

var flashMessages = document.getElementsByClassName('js-flash-message');
//show first flash message avilable in your page
showFlashMessage(flashMessages[0]);

Categories

• Feedback
• Overlays

Bug report & feedback

Component Github page ↗