A lightning:buttonIcon component represents an icon-only button element that executes an action in a controller. Clicking the button triggers the client-side controller method set for onclick.
Use the variant, size, or class attributes to customize the styling. If you want to change the color of a buttonIcon, use the class attribute.
The Lightning Design System utility icon category offers nearly 200 utility icons that can be used in lightning:buttonIcon. Although the Lightning Design System provides several categories of icons, only the utility category can be used in lightning:buttonIcon.
Visit https://lightningdesignsystem.com/icons/#utility to view the utility icons.
This component inherits styling from button icons in the Lightning Design System.
Here is an example.
<aura:component> <lightning:buttonIcon iconName="utility:close" variant="bare" onclick="{! c.handleClick }" alternativeText="Close window." /> </aura:component>
Use the alternativeText attribute to describe the icon. The description should indicate what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'.
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. | |
alternativeText | String | The alternative text used to describe the icon. This text should describe what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'. | Yes |
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. Note: Only utility icons can be used in this component. | Yes |
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. | |
size | String | The size of the buttonIcon. Options include xx-small, x-small, medium, or large. This value defaults to medium. | |
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 buttonIcon. Accepted variants include bare, container, border, border-filled, bare-inverse, and border-inverse. This value defaults to border. |