Lightning Stateful Button Component

The lightning:buttonStateful can be used to represent a button state that toggles between states just like you experience on social media. The stateful button can show different labels and icons dynamically.

Below are some examples:

	<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

	<aura:attribute name="buttonstate" type="Boolean" default="false"/>
	<lightning:buttonStateful
	labelWhenOff="Follow"
	labelWhenOn="Following"
	labelWhenHover="Unfollow"
	iconNameWhenOff="utility:add"
	iconNameWhenOn="utility:check"
	iconNameWhenHover="utility:close"
	state="{! v.buttonstate }"
	onclick="{! c.handleClick }"
	/>
	</aura:component>

view raw StatefulButtonCmp hosted with ❤ by GitHub

	({
	handleClick : function (cmp, event, helper) {
	var buttonstate = cmp.get('v.buttonstate');
	cmp.set('v.buttonstate', !buttonstate);
	}
	})

view raw StatefulButtonCmpController hosted with ❤ by GitHub

	<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

	<aura:attribute name="buttonstate" type="Boolean" default="false"/>
	<lightning:buttonStateful
	state="{! v.buttonstate }"
	variant="text"
	labelWhenOff="Like"
	labelWhenOn="Liked"
	iconNameWhenOff="utility:like"
	iconNameWhenOn="utility:like"
	onclick="{! c.handleClick }"
	/>
	</aura:component>

view raw LikeButtonCmp hosted with ❤ by GitHub

	({
	handleClick : function (cmp, event, helper) {
	var buttonstate = cmp.get('v.buttonstate');
	cmp.set('v.buttonstate', !buttonstate);
	}
	})

view raw StatefulButtonCmpController hosted with ❤ by GitHub

	<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

	<aura:attribute name="buttonstate" type="Boolean" default="false"/>
	<aura:attribute name="button1state" type="Boolean" default="false"/>
	<lightning:buttonStateful
	labelWhenOff="Mute"
	labelWhenOn="Muted"
	labelWhenHover="UnMute"
	iconNameWhenOff="utility:unmuted"
	iconNameWhenOn="utility:muted"
	iconNameWhenHover="utility:unmuted"
	state="{! v.buttonstate }"
	onclick="{! c.handleClick }"
	/>
	</aura:component>