<div class="slds-notify_container">
  <div class="slds-notify slds-notify--toast slds-theme--error" role="alert">
    <span class="slds-assistive-text">Error</span>
    <button class="slds-button slds-notify__close slds-button--icon-inverse">
      <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
      </svg>
      <span class="slds-assistive-text">Close</span>
    </button>
    <div class="slds-notify__content slds-grid">
      <svg aria-hidden="true" class="slds-icon slds-icon--small slds-m-right--small slds-col slds-no-flex">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
      </svg>
      <div class="slds-col slds-align-middle">
        <h2 class="slds-text-heading--small">You encountered some errors when trying to save edits to Samuel Smith.</h2>
      </div>
    </div>
  </div>
</div>

<aura:component>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="notice" label="Show Notice" onclick="{!c.handleShowNotice}"/>
</aura:component>

<aura:component>
    <lightning:notificationsLibrary aura:id="notifLib"/>
    <lightning:button name="notice" label="Show Notice" onclick="{!c.handleShowNotice}"/>
</aura:component>

handleShowNotice : function(component, event, helper) {
    component.find('notifLib').showNotice({
        "variant": "error",
        "header": "Something has gone wrong!",
        "message": "Unfortunately, there was a problem updating the record.",
        closeCallback: function() {
            alert('You closed the alert!');
        }
    });