MoreLesson 211Free preview

Snackbar

This lesson is part of How To · All levels

Summary

A snackbar is a short message that appears temporarily at the bottom of the screen, such as a confirmation of 'Link copied'. Usually, snack bars pop up after a user's action, last a few seconds, then disappear automatically. JavaScript is used to add a display class and delete it back with a setTimeout.

Key points

Snackbars are usually positioned fixed at the bottom of the middle or left screen
Class changes visibility with smooth transitions (.show)
SetTimeout deletes classes after a certain duration
Use the aria-live to get the message read by the screen reader.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.