Component Blueprints

Alert

  • HTML/CSS:Dev Ready
  • Layout:Responsive

Sections

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.

About Alert#

Accessibility#

Role#

Alert notifications should contain role="alert" on the container to signal to assistive technology that they require the user’s immediate attention.

<div class="slds-notify slds-notify_alert" role="alert">...</div>

Assistive Text#

Use a span with the class slds-assistive-text to let the user know what type of notification it is.

<span class="slds-assistive-text">Info</span>

Base#

Use the info alert when notifying the user of neutral information about the system.

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

Variations#

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

Error#

Use the error variant when you need to alert the user about an error in the system that needs immediate attention.

<div class="slds-notify slds-notify_alert slds-alert_error" role="alert">
  <span class="slds-assistive-text">error</span>
  <span class="slds-icon_container slds-icon-utility-error slds-m-right_x-small" title="Description of icon when needed">
    <svg class="slds-icon slds-icon_x-small" aria-hidden="true">

Offline#

Use the offline alert to let the user know that they are not connected to the internet.

<div class="slds-notify slds-notify_alert slds-alert_offline" role="alert">
  <span class="slds-assistive-text">offline</span>
  <span class="slds-icon_container slds-icon-utility-offline slds-m-right_x-small" title="Description of icon when needed">
    <svg class="slds-icon slds-icon_x-small" aria-hidden="true">

Styling Hooks Overview#

Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.

CategoryStyling Hook NameValue Type(s)Fallback Value
Box Shadow
--slds-c-alert-shadow
String0 0 3px #f3f3f3
Color
--slds-c-alert-color-background
Color#747474
--slds-c-alert-color-border
Color#f3f3f3
--slds-c-alert-text-color
Colorwhite
--slds-c-alert-text-color-active
Colorrgba(255, 255, 255, 0.5)
Image
--slds-c-alert-image-background
Imagelinear-gradient(45deg, rgba(0, 0, 0, 0.025) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.025) 50%, rgba(0, 0, 0, 0.025) 75%, transparent 75%, transparent)
--slds-c-alert-size-background
String, Dimension64px 64px
Sizing
--slds-c-alert-sizing-border
Dimension1px
Spacing
--slds-c-alert-spacing-block-end
Dimension0.5rem
--slds-c-alert-spacing-block-start
Dimension0.5rem
--slds-c-alert-spacing-inline-end
Dimension2rem
--slds-c-alert-spacing-inline-start
Dimension0.5rem
Text
--slds-c-alert-font-weight
String, Number

Overview of CSS Classes#

Selector.slds-notify_alert
Summary

Initializes alert notification

Supportdev-ready
Restrictdiv
VariantTrue
Selector.slds-alert_warning
Summary

Sets styling for warning alert notification

Restrict.slds-notify_alert
Selector.slds-alert_error
Summary

Sets styling for error alert notification

Restrict.slds-notify_alert
Selector.slds-alert_offline
Summary

Sets styling for offline alert notification

Restrict.slds-notify_alert
Selector.slds-notify__close
Summary

Alert close button

Restrict.slds-notify_alert div

Alert Release Notes

2.17.0

Added

  • Added slds as the default namespace with sds fallbacks for Styling Hooks.
  • Added reassignment of Styling Hooks for component states.

2.14.0

Fixed

  • Fix incorrect Styling Hook name for --sds-c-alert-text-color-warning.

Removed

  • Removed component level styling hooks for status states.

2.13.3

Changed

  • Treat Styling Hooks targeting text color as an element, previously referred to as a property. e.g. --sds-c-alert-color-text => --sds-c-alert-text-color.

2.14.0

Changed

Refactored the component markup to function with or without theme utility classes.

2.13.0

Added

  • Enabled styling hooks for alert. See alert's styling hooks overview table for a full listing of the currently available hooks.

2.8.0

Fixed

  • Added slds-button_icon-small to the close button on alerts to fix the sizing of the click target.
  • Improved the contrast for focus and hover states on links and buttons in alerts

2.7.0

Changed

  • Changed HTML so the button icon can be slotted into the slds-notify__close element

Fixed

  • Buttons with the new BEM syntax used within an inverse themed component no longer have their text color overridden