Lightning Stateful Button Component

The lightning:buttonStateful represents a toggleable button state similar to those found on social media. It enables dynamic display of different labels and icons. Specific examples and further information can be found on the Lightning Design System and Salesforce Developer websites.

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>