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="") is named from the localized Copy label by default. In a list or table every row would then announce the same name, so pass a distinct aria-label per row (aria-label="Copy client_id of Acme"). Other attributes (id, data-*, aria-describedby) go to the underlying button. Default labels come from the active i18n catalog.

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

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

<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" />

<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" />