Lightning Components Developer’s Guide
jNewer Version Available
Buttons
A button is clickable and actionable, providing a textual label, an image, or both. You can create a button in three different ways:
- Text-only Button
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="Find" /> - Image-only Button
1swfobject.registerObject("clippy.codeblock-1", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<!-- Component markup --> 18<ui:button label="Find" labelClass="assistiveText" class="img" /> 19 20/** CSS **/ 21THIS.uiButton.img { 22 background: url(/path/to/img) no-repeat; 23 width:50px; 24 height:25px; 25}The assistiveText class hides the label from view but makes it available to assistive technologies.
- Button with Text and Image
1swfobject.registerObject("clippy.codeblock-2", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<!-- Component markup --> 18<ui:button label="Find" /> 19 20/** CSS **/ 21THIS.uiButton { 22 background: url(/path/to/img) no-repeat; 23}
HTML Rendering
The markup for a button with text and image results in the following HTML.
1<button class="default uiBlock uiButton" accesskey type="button">
2 <span class="label bBody truncate" dir="ltr">Find</span>
3</button>Working with Click Events
The press event on the ui:button component is fired when the user clicks the button. In the following example, press="{!c.getInput}" calls the client-side controller action with the function name, getInput, which outputs the input text value.
1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 <ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
19 <ui:button aura:id="button" label="Click me" press="{!c.getInput}"/>
20 <ui:outputText aura:id="outName" value="" class="text"/>
21</aura:component>1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17/* Client-side controller */
18({
19 getInput : function(cmp, evt) {
20 var myName = cmp.find("name").get("v.value");
21 var myText = cmp.find("outName");
22 var greet = "Hi, " + myName;
23 myText.set("v.value", greet);
24 }Styling Your Buttons
1swfobject.registerObject("clippy.codeblock-6", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS.uiButton {
18 margin-left: 20px;
19}Note that no space is added in the .THIS.uiButton selector if your button component is a top-level element.
To override the styling for all ui:button components in your app, in the CSS resource of your app, add the following class selector.
1swfobject.registerObject("clippy.codeblock-7", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS .uiButton {
18 margin-left: 20px;
19}