Notification

Notifications convey crucial information necessitating action or acknowledgment. They remain visible until the user dismisses them.

API Reference

Ensure notifications are concise and easily understandable.
Maintain uniformity in notifications for consistent delivery of information, success, warnings, or errors across your website.
Utilize for concise messages explaining the notification's purpose.
Employ for significant updates necessitating user action or attention.

Don't overwhelm users with excessive notifications.
Don't interrupt critical tasks with intrusive notifications.
Don't use notifications for trivial or non-urgent information.
Don't ignore user preferences regarding notification settings.
Don't rely solely on notifications; provide alternative means of accessing information.

Use when indicates successful completion of a user action.
Use when alert users to potential risks, like data replacement or erasure.
Use when notifies users of failed actions due to encountered problems, such as uploading an incorrect file type.

Don't use when conveying complex information requiring user action (consider using dedicated content areas).
Don't use when interrupting critical user tasks with unimportant messages.

Notification are typically use for alerting users of new messages or friend requests

also for notifying users about upcoming appointments or deadlines.

For Digital Health Applications notifications can be used for reminding users to take medication with clear dosage and time information.

Informing users about changes in health data (e.g., blood pressure reading) with actionable guidance.

Notifying users about upcoming doctor's appointments or lab test results.

Add aria-label to the button element. Use this to provide an accessible name for buttons that don't have visible text, and to distinguish between multiple buttons with identical visible text. The text will also be added to the title attribute of the button.
Use aria-describedby attribute to identifies the element (or elements) that describes the element on which the attribute is set. correctly, define an ID for the element you want to use as label and set the property to that ID.
Use aria-disabled to indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
Add aria-pressed attribute to indicates the current "pressed" state of a toggle button.