scoped-notifications

Scoped notifications serve advisory information for the user that is not important enough to justify an alert. It is often presented as a status bar scoped to the container. They are not dismissible.

information

It looks as if duplicates exist for this lead. View Duplicates.

About Scoped Notifications

Accessibility

Scoped notifications contain role="status" on the container to signal to the browser to send an accessible status event to assistive technology. The assistive technology then notifies the user.

Base

information

It looks as if duplicates exist for this lead. View Duplicates.

<div class="slds-scoped-notification slds-media slds-media_center slds-scoped-notification_light" role="status">
  <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-utility-info" title="information">

States

Informational

info

It looks as if duplicates exist for this lead. View Duplicates.

<div class="slds-scoped-notification slds-media slds-media_center slds-theme_info" role="status">
  <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-utility-info" title="info">

Success

success

Success! Your entry has been duplicated. View Duplicates.

<div class="slds-scoped-notification slds-media slds-media_center slds-theme_success" role="status">
  <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-utility-success" title="success">

Warning

warning

It looks as if duplicates exist for this lead. View Duplicates.

<div class="slds-scoped-notification slds-media slds-media_center slds-theme_warning" role="status">
  <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-utility-warning" title="warning">

Error

error

It looks as if duplicates exist for this lead. View Duplicates.

<div class="slds-scoped-notification slds-media slds-media_center slds-theme_error" role="status">
  <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-utility-error" title="error">

Examples

Informational Notifications default to the dark theme. For light, use the class slds-scoped-notification_light instead of slds-theme_info. An additional class, slds-scoped-notification_dark is also available for the dark theme to more easily toggle between them.

Light Theme

information

It looks as if duplicates exist for this lead. View Duplicates.

<div class="slds-scoped-notification slds-media slds-media_center slds-scoped-notification_light" role="status">
  <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-utility-info" title="information">

Dark Theme

information

It looks as if duplicates exist for this lead. View Duplicates.

<div class="slds-scoped-notification slds-media slds-media_center slds-scoped-notification_dark" role="status">
  <div class="slds-media__figure">
    <span class="slds-icon_container slds-icon-utility-info" title="information">