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); } })
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. |
Event Name | Event Type | Description |
---|---|---|
press | COMPONENT | The event fired when the button is clicked. |