Button Icon Stateful

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.

When applying Lightning Design System classes or icons, check that they are available in the Lightning Design System release tied to your org. The latest Lightning Design System resources become available only when the new release is available in your org.

This component implements 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.

1<aura:component>
2  <aura:attribute name="liked" type="Boolean" default="true" />
3  <lightning:buttonIconStateful
4    iconName="utility:like"
5    selected="{!v.liked}"
6    alternativeText="Like"
7    onclick="{! c.handleToggle }" />
8  <aura:component></aura:component
9></aura:component>

Selecting the dislike button also toggles the state on the like button and deselects it.

1({
2  handleToggle: function (cmp, event) {
3    var liked = cmp.get("v.liked");
4    cmp.set("v.liked", !liked);
5  },
6});

Icons are not available in Lightning Out, but they are available in Lightning Components for Visualforce and other experiences.