Inputs

CopyButton

Copies a string to the clipboard, swaps the icon to a check for 2 seconds and announces the result to screen readers.

<script>
  import { CopyButton } from "@codeatlasdev/ui";
</script>

<CopyButton value="npm i @codeatlasdev/ui" />

The result is announced through a polite live region (Copied), and a failed copy raises an error toast. For a success toast, pass toast and mount a <Toaster /> once in your layout. An icon-only button (label="") keeps an accessible name from the localized Copy label. Default labels come from the active i18n catalog.

Default

Code

<script lang="ts">
  import { CopyButton } from '@codeatlasdev/ui';
</script>

<CopyButton value="npm i @codeatlasdev/ui" />

Variants and sizes

Code

<script lang="ts">
  import { CopyButton } from '@codeatlasdev/ui';
</script>

<CopyButton value="filled" variant="filled" />
<CopyButton value="glass" variant="glass" />
<CopyButton value="outlined" variant="outlined" />
<CopyButton value="small" size="sm" />
<CopyButton value="large" size="lg" />

Icon only and toast

label="" renders an icon-only button. toast shows a success message after copying.

Code

<script lang="ts">
  import { CopyButton, Toaster } from '@codeatlasdev/ui';
</script>

<Toaster />
<CopyButton value="icon-only" label="" />
<CopyButton value="https://ui.codeatlas.com.br" label="Copy link" toast="Link copied" />

Props

Prop	Type	Default	Description
`value`	`string`	–	Text copied to the clipboard.
`label`	`string`	`'Copy' (localized)`	Visible label. '' renders an icon-only button.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Button size.
`variant`	`'filled' \| 'glass' \| 'outlined' \| 'ghost'`	`'ghost'`	Button style.
`toast`	`string`	–	Success toast message. Omit for no toast.
`class`	`string`	–	Extra classes on the button.
`oncopy`	`(value: string) => void`	–	Called after a successful copy.