Go to homepage

Projects /

Flash Message

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

View Demo

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');

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


Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.