Button Icon Stateful generator
Bookmark, star, pin and like toggles use lightning-button-icon-stateful — a compact icon-only version of the stateful button pattern. Style the selected and unselected fills so the toggle state reads instantly in dense lists and tables.
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-icon-stateful
icon-name="utility:favorite"
selected={isSelected}
alternative-text="Toggle"
class="studio-button-icon-stateful"
onclick={handleToggle}
></lightning-button-icon-stateful>
</template>Design tips for button icon statefuls
- Use a filled icon for the "on" state and an outline icon for "off" — the shape change reinforces the color change for colorblind users.
- Keep the hit target at least 32px even though the icon itself is smaller, so it stays tappable on touch devices.
- Pair with a tooltip (via title or aria-label) since icon-only controls have no visible label.
Related components
Components developers commonly compare against or pair with Button Icon Stateful.