Button Stateful

A lightning:buttonStateful component represents a button that toggles between states, similar to a like button on social media. Stateful buttons can show a different label and icon based on their states.

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 a text label. 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 implements styling from stateful buttons in the Lightning Design System.

To handle the state change when the button is clicked, use the onclick event handler. This example enables you to toggle the button between states, displaying the “Follow” label by default, and replacing it with “Following” when the button is selected. Selecting the button toggles the state to true, and deselecting it toggles the state to false. When the state is true, the button displays “Unfollow” when you mouse over it or when it receives focus.

1<aura:component>
2  <aura:attribute name="buttonstate" type="Boolean" default="false" />
3  <lightning:buttonStateful
4    labelWhenOff="Follow"
5    labelWhenOn="Following"
6    labelWhenHover="Unfollow"
7    iconNameWhenOff="utility:add"
8    iconNameWhenOn="utility:check"
9    iconNameWhenHover="utility:close"
10    state="{! v.buttonstate }"
11    onclick="{! c.handleClick }"
12  />
13</aura:component>

The client-side controller toggles the state via the buttonstate attribute.

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

This component uses aria-live="polite", which means the button label is read after the current user task or content.

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