States
Icon buttons are interactive elements that respond to clicks, taps, and keyboard input.
Icon buttons have four states to indicate interactions clearly:
- Default - The colour presented by default
- Hover - The style changes when a user hovers over the button
- Focus - Style around the button when a user navigates via keyboard
- Active - Indicates when a button is tapped or clicked
Surface placement
Icon buttons can be placed on base (light) and inverted (dark) surfaces. The icon colour adjusts to maintain sufficient contrast against the background.