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>
To inform screen readers that a button is disabled, set the disabled attribute to true.
MethodsThis component supports the following method.
focus(): Sets the focus on the element.
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 that will be run 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). | |
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, and destructive. This value defaults to neutral. |