StellarUI

<stellar-toggle-icon>

Checkbox-like icon toggle with animated checked transitions, including rotate, fade, flip, and translate effects.

Reaction toggle

Accessible label

Copy

<stellar-toggle-icon label="Save item"></stellar-toggle-icon>

Complete props, events, slots, and implementation notes for the shipped toggle-icon.

Prop	Type	Default
`label`	`string`	`''`
`checked-icon`	`string`	`''`
`checked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`unchecked-icon`	`string`	`''`
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`effect`	`fade \| scale \| flip-x \| flip-y \| translate-x \| translate-y \| rotate \| none`	`none`

Event	Source	Notes
`click`	native	Bubbles from the internal button when the control is activated.
`input` / `change`	`stellar-toggle-icon`	Emitted after a user toggle changes `checked`.

Slot	Notes
`unchecked`	Optional markup for the unchecked face. Overrides `unchecked-icon`.
`checked`	Optional markup for the checked face. Overrides `checked-icon`.

The public tag is `stellar-toggle-icon`, matching the shipped icon-toggle boundary rather than a button utility or checkbox skin.
`checked` is the mutable state surface. User toggles emit `input` and `change`, so docs and app state can round-trip the live value.
The internal control is a toggle button with `aria-pressed`, not a decorative icon wrapper. Supply a `label` whenever the visible icon alone is not enough for assistive tech.
Use `unchecked-icon` and `checked-icon` for common icon swaps. Use the `unchecked` and `checked` slots when you need custom icon markup instead of a simple name.