lightning:button

Represents a button element.

A lightning:button component represents a button element that executes an action in a controller. Clicking the button triggers the client-side controller method set for onclick. Buttons can be either a label only, label and icon, body only, or body and icon. Use lightning:buttonIcon if you need an icon-only button.

Use the variant and class attributes to apply additional styling.

The Lightning Design System utility icon category provides nearly 200 utility icons that can be used in lightning:button along with label text. Although SLDS provides several categories of icons, only the utility category can be used in this component.

Visit https://lightningdesignsystem.com/icons/#utility to view the utility icons.

This component inherits styling from buttons in the Lightning Design System.

Here are two examples.

<aura:component>
    <lightning:button variant="brand" label="Submit" onclick="{! c.handleClick }" />
</aura:component>
<aura:component>
    <lightning:button variant="brand" label="Download" iconName="utility:download" iconPosition="left" onclick="{! c.handleClick }" />
</aura:component>
Accessibility

To inform screen readers that a button is disabled, set the disabled attribute to true.

Methods

This component supports the following method.

focus(): Sets the focus on the element.

Attributes

Attribute Name Attribute Type Description Required?
accesskey String Specifies a shortcut key to activate or focus an element.
body Component[] The body of the component. In markup, this is everything in the body of the tag.
class String A CSS class for the outer element, in addition to the component's base classes.
disabled Boolean Specifies whether this button should be displayed in a disabled state. Disabled buttons can't be clicked. This value defaults to false.
iconName String The Lightning Design System name of the icon. Names are written in the format '\utility:down\' where 'utility' is the category, and 'down' is the specific icon to be displayed.
iconPosition String Describes the position of the icon with respect to body. Options include left and right. This value defaults to left.
label String The text to be displayed inside the button.
name String The name for the button element. This value is optional and can be used to identify the button in a callback.
onblur Action The action triggered when the element releases focus.
onclick Action The action triggered when the button is clicked.
onfocus Action The action triggered when the element receives focus.
tabindex Integer Specifies the tab order of an element (when the tab button is used for navigating).
title String Displays tooltip text when the mouse moves over the element.
type String Specifies the type of button. Valid values are button, reset, and submit. This value defaults to button.
value String The value for the button element. This value is optional and can be used when submitting a form.
variant String The variant changes the appearance of the button. Accepted variants include base, neutral, brand, destructive, and inverse. This value defaults to neutral.