Notices deliver System and Engagement messaging, informing the user about product or account statuses and related actions.
Used to reference the alert message within the dialog. If you are using role="alertdialog", this must be applied. (Source)
Informs assistive technologies (such as screen readers) if they should ignore the element. This should not be confused with the HTML5 hidden attribute which tells the browser to not display an element. (Source)
Labels the element for assistive technologies (such as screen readers). (Source)
Defines the banner area as a distinct area on the page. Used only on hero banners. (Source)
Defines a live region with advisory information for the user, but not important enough to warrant an alert. (Source)
A form of live region which contains important, usually time-sensitive, information. Elements with an alert role have an implicit aria-live value of assertive and implicit aria-atomic value of true. (Source)
The wrapping content area of an alert. Elements with the alertdialog role must use the aria-describedby attribute to reference the alert message within the dialog. (Source)
A form of live region which contains advisory information but isn't important enough to justify an alert role. Elements with a status role have an implicit aria-live value of polite and implicit aria-atomic value of true. If the element controlling the status appears in a different area of the page, you must make the relationship explicit with the aria-controls attribute. (Source)
Default style used to separate notices from the main content.
Visual style for information notices.
Visual style for success notices.
Visual style for warning notices.
Visual style for danger notices.
Emboldens the above visual styles by strengthening the background saturation. This should be used for time-sensitive, pressing information that needs to be noticed by the user.
Default style used to separate notices from the main content