Notifications
Notifications serve as a feedback & confirmation mechanism that comes into the page at the top right.
Base
Preview
About Notifications
Notifications serve as a feedback & confirmation mechanism that comes in at the top right. The body of the notification is a clickable region that will prompt an additional browser tab with that record loaded and dismiss the notification. It is also dismissable by clicking the X icon.
Implementation Notes
The first three notifications that appear on the page should stack on one another. The fourth notification will show slightly beneath the third notification. Any subsequent notifications won't show until earlier notifications are dismissed.
Accessibility
Notifications should contain role="dialog" to signal to
assistive technology that they require the user’s immediate attention.
Implementation Notes and Requirements
This notification will consist of the following:
- Entity icon with background color
- Subject field for the reminder
- The time/date of when the event/task is occurring
- An ‘X’ icon to dismiss the reminder
Overview of CSS Classes
| Selector | .slds-notification |
|---|---|
| Summary | |
| Restrict | .slds-notification-container section, .slds-notification-container div |
| Variant | True |
| Selector | .slds-notification__body |
|---|---|
| Summary | The body of the notification |
| Restrict | .slds-notification div |
| Selector | .slds-notification__target |
|---|---|
| Summary | Main reminder component |
| Restrict | .slds-notification__body a |
| Selector | .slds-notification__close |
|---|---|
| Summary | Notification close button |
| Restrict | .slds-notification__body button |
| Selector | .slds-notification__footer |
|---|---|
| Summary | Optional notification footer |
| Restrict | .slds-notification div |