Button Labels

Buttons can appear with text only, an icon and text, or an icon only. To create an accessible button, use the lightning:button or lightning:buttonIcon base components and set a textual label using the label attribute.

Button with text only:

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

Button with icon and text:

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

lightning:button implements the button blueprint in the Salesforce Lightning Design System (SLDS) and follows its accessibility guidelines.

Button with icon only:

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

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

lightning:buttonIcon implements the button icon blueprint in the SLDS and follows its accessibility guidelines.

This example shows the HTML generated by lightning:buttonIcon:

1<!-- Use assistive text 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>

To support tooltip on desktop, include the title attribute in addition to the label or alternativeText attribute. The title attribute can be problematic for touch-only devices, keyboard navigation, and assistive technologies. Therefore, it must be used together with label or alternativeText.

Other button-based components include:

lightning:buttonGroup

A group of buttons. This component implements the button group blueprint in the SLDS and follows its accessibility guidelines.

lightning:buttonIconStateful

A button with an icon only that retains state. This component implements the button icon blueprint in the SLDS and follows its accessibility guidelines.

lightning:buttonMenu

A dropdown menu with a list of actions or items. This component implements the menu blueprint in the SLDS and follows its accessibility guidelines.

lightning:buttonStateful

A button that retains state. This component implements the button blueprint in the SLDS and follows its accessibility guidelines.