ui:button

A ui:button component represents a button element that executes an action defined by a controller. To apply Lightning Design System styling, we recommend that you use lightning:button instead of ui:button.

Clicking the button triggers the client-side controller method set for the press event. The button can be created in several ways.

A text-only button has only the label attribute set on it.

1<ui:button label="Find"/>

An image-only button uses both the label and labelClass attributes with CSS.

1<!-- Component markup -->
2<ui:button label="Find" labelClass="assistiveText" class="img" />
3
4/** CSS **/
5THIS.uiButton.img {
6background: url(/path/to/img) no-repeat;
7width:50px;
8height:25px;
9}

The assistiveText class hides the label from view but makes it available to assistive technologies. To create a button with both image and text, use the label attribute and add styles for the button.

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

The previous markup for a button with text and image results in the following HTML.

1<button class="button uiButton--default uiButton" accesskey type="button">
2<span class="label bBody truncate" dir="ltr">Find</span>
3</button>

This example shows a button that displays the input value you enter. To apply Lightning Design System styling, we recommend that you use lightning:button instead of ui:button.

1<aura:component access="global">
2 <ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
3 <ui:button aura:id="button" buttonTitle="Click to see what you put into the field" class="button" label="Click me" press="{!c.getInput}"/>
4 <ui:outputText aura:id="outName" value="" class="text"/>
5</aura:component>

1({
2    getInput : function(cmp, evt) {
3        var myName = cmp.find("name").get("v.value");
4        var myText = cmp.find("outName");
5        var greet = "Hi, " + myName;
6        myText.set("v.value", greet);
7    }
8})

Attributes

Events