Icon Button
Mantine ActionIcon. In the header uses a gray fill; in content areas uses a transparent fill with a colored glyph. Used for theme toggle, settings, docs, burger, collapse-all, copy-code, time-scrub arrows, and query options.
DO
Always provide aria-label — icon-only buttons are invisible to screen readers without one.
DON'T
Pack more than 3 Icon Buttons in a row without spacing; they blur into a toolbar strip.
Design
header
Solid gray fill on header slate.
content
Transparent background, inherits icon color.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<ActionIcon aria-label="Copy code" variant="subtle"><IconClipboard /></ActionIcon>Layout
| Property | Value |
|---|---|
| size | 32×32 px icon-button-size |
| icon-size | 16px |
| border-radius | 4px sm |
Accessibility
| ARIA | Required. Describe the action, not the icon. |
| Keyboard | Standard button semantics. |