IconToggle
A two-state icon action — favourite a store, follow, flag. Manages aria-pressed, which is the difference between this and an IconButton you re-render with a different glyph.
import IconToggle from '@/components/ui/IconToggle';Source: src/components/ui/IconToggle.tsx
Examples
Pressed states
Uncontrolled by default (`defaultPressed`), controlled when you pass `pressed`. The `activeIcon` is the filled variant shown while pressed.
Props
<IconToggle> props
| Prop | Type | Default | Description |
|---|---|---|---|
iconrequired | IconName | — | — |
activeIcon | IconName | — | The filled variant shown while pressed (defaults to `icon` if the font has no pair). |
color | IconButtonColor | 'red' | — |
size | IconButtonSize | 'md' | — |
pressed | boolean | — | — |
defaultPressed | boolean | false | — |
onPressedChange | (pressed: boolean) => void | — | — |
Also accepts everything in Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'onToggle'> — so native attributes (id, onClick, aria-*, data-*) pass straight through.
Accessibility
- aria-pressed carries the state, so the label stays constant and the state is announced separately.
Usage
Do
- Give it an aria-label that names the ACTION, not the state — “Favourite”, not “Favourited”.
Don’t
- Don’t build one out of IconButton. You would have to manage aria-pressed yourself, and a toggle that only changes its icon tells a screen-reader user nothing.