Notifications

Notifications

Notifications serve as a feedback & confirmation mechanism that comes into the page at the top right.

Base

Preview

No content has been added for this component.

No content has been added for this component.

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
VariantTrue
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