Copy Button
Mantine ActionIcon pinned top-right of a code block. aria-label='Copy code'. Inherits Icon Button chrome.
DO
Give immediate visual feedback on click (icon swap or toast) so users trust the copy happened.
DON'T
Ship a Copy Button on /config without one on /flags — flag values are the most-copied strings in the app.
Design
default
Transparent ActionIcon with clipboard glyph.
Component reference (screenshots)
Placeholder screenshots — the audited app is live at prometheus-e83j.onrender.com.
Implementation
<ActionIcon aria-label="Copy code" onClick={copy}><IconClipboard /></ActionIcon>Layout
| Property | Value |
|---|---|
| position | absolute top-right |
| size | 32×32 px icon-button-size |
Accessibility
| ARIA | Required: 'Copy code'. Announce success via aria-live after copy. |