function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Graeme Smith 7Graeme Smith 7 

Notification doesn't close

I was having a go at trying to implement a custom notification according to this site: https://lightningdesignsystem.com/components/notifications/ and adding it to an aura component. 

Versus the examples the first issue I had was it didnt want to save with svg tags, so I replaced those with <lightning:icon/>. The notification now displays okay but when I click the dismiss/close icon nothing is happening. There is no mention on the page of needing a custom controller or anything, but am I missing something?

My modified code is below.
 
<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId">
  <div class="Breach-Notification" style="height:0rem">
  <div class="slds-notification-container">
    <div aria-live="assertive" aria-atomic="true" class="slds-assistive-text">Breach Imminent!</div>
    <section class="slds-notification" role="dialog" aria-labelledby="noti52" aria-describedby="dialog-body-id-49">
      <div class="slds-notification__body" id="dialog-body-id-49">
        <a class="slds-notification__target slds-media" href="javascript:void(0);">
          <span class="slds-icon_container slds-icon-standard-event slds-media__figure" title="Action now!">
          	 <lightning:icon iconName="custom:custom82" size="large" alternativeText="Action"/>		
          </span>
          <div class="slds-media__body">
            <h2 class="slds-text-heading_small slds-m-bottom_xx-small" id="noti52">
              Breach Imminent</h2>
            <p>This is just a test - don't panic!</p>
          </div>
        </a>
        <button class="slds-button slds-button_icon slds-button_icon-container slds-notification__close" title="Dismiss Alert">          
   			 <lightning:icon iconName="utility:close" size="xx-small" alternativeText="Close"/>			
          <span class="slds-assistive-text">Dismiss Alert</span>
        </button>
      </div>
    </section>
  </div>
</div>
</aura:component>

 
Danish HodaDanish Hoda
Hi Graeme,
lightning:icon shows you the UI, you will have to write "onClick" function to get it working.