A lightning:buttonIconStateful component represents an icon-only button element that toggles between two states. For example, you can use this component for capturing a customer's feedback on a blog post (like or dislike). Clicking the button triggers the client-side controller method set for onclick and changes the state of the icon using the selected attribute.
The Lightning Design System utility icon category offers nearly 200 utility icons that can be used in lightning:buttonIconStateful. Although the Lightning Design System provides several categories of icons, only the utility category can be used with this component.
Visit https://lightningdesignsystem.com/icons/#utility to view the utility icons.
This component inherits styling from button icons in the Lightning Design System.
You can use a combination of the variant, size, and class attributes to customize the button and icon styles. To customize styling on the button container, use the class attribute.
This example creates a like button that toggles between two states. The like button is selected by default. The button's state is stored in the selected attribute.
<aura:component> <aura:attribute name="liked" type="Boolean" default="true"/> <lightning:buttonIconStateful iconName="utility:like" selected="{!v.liked}" alternativeText="Like" onclick="{! c.handleToggle }"/> <aura:component>
Selecting the dislike button also toggles the state on the like button and deselects it.
({ handleToggle : function (cmp, event) { var liked = cmp.get("v.liked"); cmp.set("v.liked", !liked); } })
Methods
This component supports the following method.
focus(): Sets focus on the element.
Attribute Name | Attribute type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
accesskey | String | Specifies a shortcut key to activate or focus an element. | |
tabindex | Integer | Specifies the tab order of an element (when the tab button is used for navigating). | |
onfocus | Action | The action triggered when the element receives focus. | |
onblur | Action | The action triggered when the element releases focus. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
name | String | The name for the button element. This value is optional and can be used to identify the button in a callback. | |
value | String | The value for the button element. This value is optional and can be used when submitting a form. | |
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 |
variant | String | The variant changes the appearance of buttonIcon. Accepted variants include border, border-filled, and border-inverse. This value defaults to border. | |
size | String | The size of the buttonIcon. Options include xx-small, x-small, small, and medium. This value defaults to medium. | |
disabled | Boolean | Specifies whether this button should be displayed in a disabled state. Disabled buttons can't be clicked. This value defaults to false. | |
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 |
onclick | Action | The action that will be run when the button is clicked. | |
selected | Boolean | Specifies whether button is in selected state or not |