ui:button

Represents a button element.

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.

<ui:button label="Find"/>

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

<!-- Component markup -->
<ui:button label="Find" labelClass="assistiveText" />

/** CSS **/
THIS.uiButton.img {
background: url(/path/to/img) no-repeat;
width:50px;
height:25px;
}

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.

<!-- Component markup -->
<ui:button label="Find" />

/** CSS **/
THIS.uiButton {
background: url(/path/to/img) no-repeat;
}

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

<button accesskey type="button">
<span dir="ltr">Find</span>
</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.

<aura:component access="global">
 <ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
 <ui:button aura:id="button" buttonTitle="Click to see what you put into the field" label="Click me" press="{!c.getInput}"/>
 <ui:outputText aura:id="outName" value=""/>
</aura:component>
({
    getInput : function(cmp, evt) {
        var myName = cmp.find("name").get("v.value");
        var myText = cmp.find("outName");
        var greet = "Hi, " + myName;
        myText.set("v.value", greet);
    }
})

Attributes

Attribute Name Attribute Type Description Required?
accesskey String The keyboard access key that puts the button in focus. When the button is in focus, pressing Enter clicks the button.
body Component[] The body of the component. In markup, this is everything in the body of the tag.
buttonTitle String The text displayed in a tooltip when the mouse pointer hovers over the button.
buttonType String Specifies the type of button. Possible values: reset, submit, or button. This value defaults to button.
class String A CSS style to be attached to the button. This style is added in addition to base styles output by the component.
disabled Boolean Specifies whether this button should be displayed in a disabled state. Disabled buttons can't be clicked. Default value is "false".
label String The text displayed on the button. Corresponds to the value attribute of the rendered HTML input element.
labelClass String A CSS style to be attached to the label. This style is added in addition to base styles output by the component.

Events

Event Name Event Type Description
press COMPONENT The event fired when the button is clicked.