Button Stateful generator
Follow/Following, Join/Joined and similar two-state actions all lean on lightning-button-stateful. Style the off and on colors distinctly so the current state is obvious at a glance, and preview both states before you ship.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-button-stateful
label-when-off="Follow"
label-when-on="Following"
label-when-hover="Unfollow"
icon-name-when-off="utility:add"
icon-name-when-on="utility:check"
icon-name-when-hover="utility:close"
selected={isSelected}
class="studio-button-stateful"
onclick={handleToggle}
></lightning-button-stateful>
</template>Design tips for button statefuls
- Keep the "on" state visually calmer (softer fill, same accent color) than the "off" state — it should read as "done," not as another call to action.
- Reuse your primary accent for both states so the button still feels branded when selected.
- Always set a hover label (e.g. "Unfollow") so users understand what clicking again will do.
Related components
Components developers commonly compare against or pair with Button Stateful.