Prepared Docs

IconToggle from @prepared911/ui-core is an icon-first control with checked / unchecked state. The component renders a native <button> with checkbox semantics; your job is to write state-aware titles, reflect the state non-visually, and never rely on color alone.

What the component handles

Native button element with checkbox semantics (role="checkbox").
aria-checked reflects current state.
Single accessible name. title is applied once as aria-label on the control. Both icons stay in the DOM (CSS reveals the active one) and are decorative (title=""), so assistive tech does not announce the label twice (for example "Dismiss Dismiss").
Focus indicator and keyboard activation.

What you must provide

State-aware title. Label the action the button will perform when activated ("Mute audio" when unmuted; "Unmute audio" when muted). The title doubles as the accessible name and the tooltip, so both audiences hear the next action.
Distinct icons per state. Don't differentiate state by color alone. Swap the icon, outline, or fill so colorblind and low-vision operators can tell checked from unchecked without hue.

Keyboard behavior

Tab / Shift+Tab move focus.
Enter / Space toggle state.

Semantics and roles

Native <button> with role="checkbox" and aria-checked="true" | "false" reflecting state.

Known caveats

Color-only differentiation. Checked state signaled purely by color fails WCAG and confuses colorblind operators. Always pair color with an icon or outline change.
Ambiguous labels. "Favorite" and "Favorited" read similarly; prefer "Add to favorites" / "Remove from favorites" so the verb makes the direction clear.

Icon Toggle / API and Development

Image / Usage

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats

What the component handles

Native button element with checkbox semantics (role="checkbox").
aria-checked reflects current state.
Single accessible name. title is applied once as aria-label on the control. Both icons stay in the DOM (CSS reveals the active one) and are decorative (title=""), so assistive tech does not announce the label twice (for example "Dismiss Dismiss").
Focus indicator and keyboard activation.

What you must provide

State-aware title. Label the action the button will perform when activated ("Mute audio" when unmuted; "Unmute audio" when muted). The title doubles as the accessible name and the tooltip, so both audiences hear the next action.
Distinct icons per state. Don't differentiate state by color alone. Swap the icon, outline, or fill so colorblind and low-vision operators can tell checked from unchecked without hue.

Keyboard behavior

Tab / Shift+Tab move focus.
Enter / Space toggle state.

Semantics and roles

Native <button> with role="checkbox" and aria-checked="true" | "false" reflecting state.

Known caveats

Color-only differentiation. Checked state signaled purely by color fails WCAG and confuses colorblind operators. Always pair color with an icon or outline change.
Ambiguous labels. "Favorite" and "Favorited" read similarly; prefer "Add to favorites" / "Remove from favorites" so the verb makes the direction clear.