Button Labels

Buttons can appear with text only, an icon and text, or an icon without text. To create an accessible button, use lightning:button and set a textual label using the label attribute. For more information, see lightning:button.
Note

Note

You can create accessible buttons using ui:button but they don’t come with Lightning Design System styling. We recommend using lightning:button instead.

Button with text only:

<lightning:button label="Search" onclick="{!c.doSomething}"/>

Button with icon and text:

<lightning:button label="Download" iconName="utility:download" onclick="{!c.doSomething}"/>

Button with icon only:

<lightning:buttonIcon iconName="utility:settings" alternativeText="Settings" onclick="{!c.doSomething}"/>

The alternativeText attribute provides a text label that’s hidden from view and available to assistive technology.

This example shows the HTML generated by lightning:button:

<!-- Good: using span/assistiveText to hide the label visually, but show it to screen readers -->
<button>
    ::before
    <span class="slds-assistive-text">Settings</span>
</button>