Copy button
Copies a value to the clipboard.
mrn://postgresql/table/shop.public.orders
<code>mrn://postgresql/table/shop.public.orders</code>
<mm-copy-button value="mrn://postgresql/table/shop.public.orders" label="Copy MRN"></mm-copy-button>
Guidance
A copy button copies a machine string, usually an MRN, an ID or a SQL statement, and confirms
with "Copied" and a check for 1.5 seconds. The confirmation is announced through a polite live
region. It is an icon-only ghost button by default; set icon-only="false" to show the label.
On a code block, use tone="code" so it sits on the fixed dark ground.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
value | value | string | '' | The text to copy. |
label | label | string | '' | Accessible name and visible text. Defaults to "Copy". Name the thing where you can ("Copy MRN"). |
iconOnly | icon-only | boolean | true | Shows only the icon (the default). Set icon-only="false" to show the label beside it. |
tone | tone | 'default' | 'code' | 'default' | default, or code for the dark code block ground. |
size | size | 'md' | 'sm' | 'md' | md (default) or sm. |
disabled | disabled | boolean | false |
Methods
| Method | Description |
|---|---|
copy() | Copies value now. Resolves to whether the copy succeeded. |
Events
| Event | Detail | Description |
|---|---|---|
mm-copy | CustomEvent<{ value: string }> | The value was copied. |
CSS parts
| Part | Description |
|---|---|
button | The inner mm-button. |
Examples
Every state of mm-copy-button in Storybook, with keyboard and screen reader tests.