Copy button
A copy button sits beside a value people paste elsewhere, such as a token, an id or a command. It names that element by target_id, and the base island copies the element's text when it is pressed, then shows Copied in place of Copy. The button is wide enough for either word, so the row never shifts.
Copy a command
The button copies the text of the element it names.
cargo add ocean-ui-webout.push_str(r#"<code id="copy-cmd">cargo add ocean-ui-web</code>"#);
CopyButton { what: "the command".into(), target_id: "copy-cmd".into() }.html(out);Copy a key
It says Copied for a moment, politely, to screen readers.
obt_live_7f3aout.push_str(r#"<code id="copy-key">obt_live_7f3a</code>"#);
CopyButton { what: "the token".into(), target_id: "copy-key".into() }.html(out);Copy a link
The label names what is copied.
https://www.plungeai.com/uiout.push_str(r#"<code id="copy-url">https://www.plungeai.com/ui</code>"#);
CopyButton { what: "the link".into(), target_id: "copy-url".into() }.html(out);Use it
Web
use ocean_ui_core::CopyButton;
CopyButton { what: "the token".into(), target_id: "token".into() }Cargo feature base of ocean-ui-core and ocean-ui-web; available since 2026-11-01.
Props
| Name | Type | Default | What |
|---|---|---|---|
what | String | — | What it copies, in words; the label reads Copy <what>. |
target_id | String | — | The id of the element whose text is copied. |
Accessibility
- The aria-label is Copy followed by what, so a screen reader says what will be copied, not just Copy.
- After a copy the island says Copied through aria-live polite, so the result is announced without moving focus.
- It is a real button of type button, reached with Tab and pressed with Enter or Space.
Related
Markdown
The same page as Markdown, for an agent or a pull request.
# Copy button
A small ghost button that copies the text of one element and says Copied for a moment.
A copy button sits beside a value people paste elsewhere, such as a token, an id or a command. It names that element by target_id, and the base island copies the element's text when it is pressed, then shows Copied in place of Copy. The button is wide enough for either word, so the row never shifts.
## Use it
Web:
```rust
use ocean_ui_core::CopyButton;
CopyButton { what: "the token".into(), target_id: "token".into() }
```
Cargo feature `base`; since 2026-11-01.
## Props
| Name | Type | Default | What |
|---|---|---|---|
| `what` | `String` | `—` | What it copies, in words; the label reads Copy <what>. |
| `target_id` | `String` | `—` | The id of the element whose text is copied. |
## Examples
### Copy a command
The button copies the text of the element it names.
```rust
out.push_str(r#"<code id="copy-cmd">cargo add ocean-ui-web</code>"#);
CopyButton { what: "the command".into(), target_id: "copy-cmd".into() }.html(out);
```
### Copy a key
It says Copied for a moment, politely, to screen readers.
```rust
out.push_str(r#"<code id="copy-key">obt_live_7f3a</code>"#);
CopyButton { what: "the token".into(), target_id: "copy-key".into() }.html(out);
```
### Copy a link
The label names what is copied.
```rust
out.push_str(r#"<code id="copy-url">https://www.plungeai.com/ui</code>"#);
CopyButton { what: "the link".into(), target_id: "copy-url".into() }.html(out);
```
## Accessibility
- The aria-label is Copy followed by what, so a screen reader says what will be copied, not just Copy.
- After a copy the island says Copied through aria-live polite, so the result is announced without moving focus.
- It is a real button of type button, reached with Tab and pressed with Enter or Space.
## Related
- [Button](/ui/components/button.md)
- [Markdown](/ui/components/markdown.md)
- [Grid](/ui/components/grid.md)