Open experiment
Icon action button
A compact icon-only control for dense toolbars that preserves an explicit accessible name and reveals a visual label on hover or keyboard focus.
Lab tested Responsive Dark mode
- Version
- 1.0.0
- Updated
- 2026-08-02
- Dependencies
- Zero
<button class="cmp-icon-button" type="button" aria-label="Copy component">
<svg aria-hidden="true" viewBox="0 0 24 24">
<rect x="8" y="8" width="11" height="11" rx="2"></rect>
<path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"></path></svg
><span>Copy component</span>
</button>
No runtime reactions detected Open in Editor
Validated in the lab
Experiment report
- Schema and source files passed
- Responsive test passed
- Keyboard test passed
- No console errors
Component ingredients
- Dependencies
- None
- Browser support
- Current Chrome, Current Edge, Current Firefox, Current Safari
- Version
- 1.0.0
- Last tested
- 2026-08-02
Accessibility notes
- The button has an aria-label.
- Tooltip text duplicates the accessible name.
- Focus is visible.
License: MIT License for open-source use, modification, and distribution.