ButtonsLesson 109Free preview

Notification Button

This lesson is part of How To · All levels

Summary

A notification button is a button that comes with a small badge containing the number of notifications. The badge is placed stacked at the corner of the button using position: absolute. Because information is a significant amount, its value must also be conveyed through alternative text to the screen reader.

Key points

The wrapping button uses position: relative so that the badge can be positioned.
The badge uses position: absolute in the upper right corner.
Large border-radius with minimum size makes the badge appear as a circle or small capsule.
Hide the badge when the number of notifications is zero.
Include the number of notifications in the key-label areas.

Full lesson

Code examples and quizzes

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