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.

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

Note

Button with text only:

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

Button with icon and text:

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

Button with icon only:

1<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:

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

Lightning Components Developer Guide

Button Labels