Button (Deprecated)

We recommend using Lightning Web Components whenever possible. When migrating to Lightning Web Components, use lightning-button, lightning-button-icon, or lightning-button-icon-stateful. For button groups, use lightning-button-group.

For more information, see Aura Components in the ui Namespace Are Deprecated.

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
3<ui:button label="Find" labelClass="assistiveText" class="img" />

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

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
3<ui:button label="Find" />

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

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
3  <span class="label bBody truncate" dir="ltr">Find</span>
4
5</button>