Salesforce Lightning Alert banners communicate a state that affects the entire system, not just a feature or page. It persists over a session and appears without the user initiating the action.
Alert – Accessibility
Alert notifications should contain role="alert"
on the container to signal to assistive technology that they require the user’s immediate attention.
Use a span with the class slds-assistive-text
to let the user know what type of notification it is.
Alert – Base
Use the info alert when notifying the user of neutral information about the system.
Alert – CSS Classes
The following table lists out the CSS classes for Lightning Alert component, their usage, and the CSS selectors that these AlertCSS classes can be used on.
CSS Class Name | Description |
---|---|
slds-notify_alert | Initializes alert notification. This CSS class can be used for the elements with CSS selector div only. |
slds-avatar__initials | Used for initials inside an avatar. This CSS class can be used for the elements with CSS selector .slds-avatar abbr only. |
slds-alert_warning | Sets styling for warning alert notification. This CSS class can be used for the elements with CSS selector .slds-notify_alert only. |
slds-alert_error | Sets styling for error alert notification. This CSS class can be used for the elements with CSS selector .slds-notify_alert only. |
slds-alert_offline | Sets styling for offline alert notification. This CSS class can be used for the elements with CSS selector .slds-notify_alert only. |
slds-notify__close | Alert close button. This CSS class can be used for the elements with CSS selector .slds-notify_alert div only. |
<aura:component>
<div class="slds-notify slds-notify_alert" role="alert">
<span class="slds-assistive-text">info</span>
<span class="slds-icon_container slds-icon-utility-user slds-m-right_x-small" title="Description of icon when needed">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<span xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#user"></span>
</svg>
</span>
<h2>Logged in as Tutorislkart (tutorialkart@tk.com).
<a href="#">Log out</a>
</h2>
<div class="slds-notify__close">
<button class="slds-button slds-button_icon slds-button_icon-small slds-button_icon-inverse" title="Close">
<svg class="slds-button__icon" aria-hidden="true">
<span xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></span>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
</div>
</div>
</aura:component>
Alert – Variations
Alert – Warning
Use the warning variant to warn the user about important system information that deserves caution.
<div class="slds-notify slds-notify_alert slds-alert_warning" role="alert">
<span class="slds-assistive-text">warning</span>
<span class="slds-icon_container slds-icon-utility-warning slds-m-right_x-small" title="Description of icon when needed">
<svg class="slds-icon slds-icon_x-small" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
</svg>
</span>
<h2>Your browser is outdated. Your Salesforce experience may be degraded.
<a href="https://www.tutorialkart.com">Tutorialkart.com</a>
</h2>
<div class="slds-notify__close">
<button class="slds-button slds-button_icon slds-button_icon-small" title="Close">
<svg class="slds-button__icon" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
</svg>
<span class="slds-assistive-text">Close</span>
</button>
</div>
</div>