Salesforce Lightning Design System has a Toast component:


I am using this to show an error message upon a component error. To just get the example code to save in a Communities component, I had to make a few changes, such as removing the SVG reference and using lightning:icon instead. However clicking the X does not close the toast component:

<aura:if isTrue="{!v.hasError}">
    <div class="slds-notify_container slds-is-relative">
        <div class="slds-notify slds-notify_toast slds-theme_error" role="alert">
            <span class="slds-assistive-text">error</span>
            <span class="slds-icon_container slds-icon-utility-error slds-m-right_small slds-no-flex slds-align-top" title="Description of icon when needed">
                <lightning:icon iconName="utility:error" variant="inverse"  size="x-small"/>
            <div class="slds-notify__content">
                <h2 class="slds-text-heading_x-small">{!v.errorMessage}</h2>
            <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close">
                <lightning:icon iconName="utility:close" variant="inverse" size="x-small" />
                <span class="slds-assistive-text">Close</span>

Do I have to wire up an event myself for this task? If so, does anyone know of any examples of how to go about doing this in a Salesforce recommended way?


When Using the SLDS components, you usually have to resort to coding for any button/action that is needed when interacting with it.

I personally use force:showToast when displaying UI messages in lightning after a user action.

  • Sweet, didn't realize that existed. Thanks! – Swisher Sweet Feb 13 '18 at 21:37
  • now you know ;), happy coding – glls Feb 13 '18 at 21:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.