Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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");<ui:button label="Find" />
  • Image-only Button
    1swfobject.registerObject("clippy.codeblock-1", "9");<!-- Component markup -->
2<ui:button label="Find" labelClass="assistiveText" class="img" />
3
4/** CSS **/
5THIS.uiButton.img {
6    background: url(/path/to/img) no-repeat;
7    width:50px;
8    height:25px;
9}

    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");<!-- Component markup -->
2<ui:button label="Find" />
3
4/** CSS **/
5THIS.uiButton {
6    background: url(/path/to/img) no-repeat;
7}

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");<aura:component>
2  <ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
3  <ui:button aura:id="button" label="Click me" press="{!c.getInput}"/>
4  <ui:outputText aura:id="outName" value="" class="text"/>
5</aura:component>
1swfobject.registerObject("clippy.codeblock-5", "9");/* Client-side controller */
2({
3    getInput : function(cmp, evt) {
4        var myName = cmp.find("name").get("v.value");
5        var myText = cmp.find("outName");
6        var greet = "Hi, " + myName;
7        myText.set("v.value", greet);
8   }

Styling Your Buttons

The ui:button component is customizable with regular CSS styling. In the CSS resource of your component, add the following class selector.
1swfobject.registerObject("clippy.codeblock-6", "9");.THIS.uiButton {
2    margin-left: 20px;
3}

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");.THIS .uiButton {
2    margin-left: 20px;
3}