This component implements the Material Design 3 icon button with proper accessibility support. It supports various styles, toggle states with different icons, and can be used as a link or button.
Qwik M3 Icon Button
Prop Controls
Basic Icon Buttons
Standard
Filled
Tonal
Outlined
Advanced Icon Buttons
Toggle Buttons
Link Buttons
<IconButton
variant="standard"
icon={<MenuIcon />}
aria-label="Menu"
/>
<IconButton
variant="filled"
icon={<CircleIcon />}
iconSelected={<CheckCircleIcon />}
toggle
bind:selected={isSelected}
onSelectedChange$={(selected) => console.log('Selected:', selected)}
aria-label="Select"
aria-label-selected="Selected"
/>