Salesforce Docs Portal

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:

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

Button with icon and text:

<!-- otherprops: set_clipboard --> 
<lightning:button label="Download" iconName="utility:download" 
                  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:

<lightning:buttonIcon iconName="utility:settings"
                      onclick="{!c.doSomething}
                      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:

<!-- otherprops: set_clipboard --> 
<!-- Use assistive text to hide the label visually, but show it to screen readers -->
<button>
    ::before
    <span class="slds-assistive-text">Settings</span>
</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.

note: Most ARIA states and properties are supported on these base components. For more information, see the reference documentation in the Component Library.

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.

See Also