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?


1 Answer 1


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! Commented Feb 13, 2018 at 21:37
  • now you know ;), happy coding
    – glls
    Commented Feb 13, 2018 at 21:37

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .