Button Labels

Buttons may be designed to appear with just text, an image and text, or an image without text. To create an accessible button, use ui:button and set a textual label using the label attribute.

1<ui:button label="Search"
2iconImgSrc="/auraFW/resources/aura/images/search.png"/>

To create an accessible button with Lightning Design System styling, use lightning:button instead.

1<lightning:button variant="brand" label="Submit"/>

When using ui:button, assign a non-empty string to label attribute. These examples show how a ui:button should render:

1<!-- Good: using alt attribute to provide a invisible label -->
2<button>
3    <img src="search.png" alt="Search"/>
4</button>

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