Lightning Components Developer’s Guide
jNewer Version Available
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. The text is available to assistive technologies, but not visible on screen.
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<ui:button label="Search"
18iconImgSrc="/auraFW/resources/aura/images/search.png"/>When using ui:button, assign a non-empty string to label attribute. These examples show how a ui:button should render:
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!-- Good: using alt attribute to provide a invisible label -->
18<button>
19 <img src="search.png" alt="Search"/>
20</button>
211swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!-- Good: using span/assistiveText to hide the label visually, but show it to screen readers -->
18<button>
19 ::before
20 <span class="assistiveText">Search</span>
21</button>