Clipboard

A component for copying text to the clipboard with visual feedback.

Anatomy 

<script>
  import {
    Clipboard,
    ClipboardButton,
    ClipboardIconButton,
    ClipboardInput,
  } from "@saas-ui/svelte/components/clipboard";
</script>

<Clipboard.Root value="https://saas-ui.dev">
  <Clipboard.Label>Copy Link</Clipboard.Label>
  <Clipboard.Control>
    <Clipboard.Input />
    <Clipboard.Trigger>
      <Clipboard.Indicator copied={false}>
        <CopyIcon />
      </Clipboard.Indicator>
      <Clipboard.Indicator copied={true}>
        <CheckIcon />
      </Clipboard.Indicator>
    </Clipboard.Trigger>
  </Clipboard.Control>
</Clipboard.Root>

Examples

Basic Accessibility

Basic clipboard with icon button.

Button Accessibility

Clipboard with text button.

Custom Labels Accessibility

Clipboard with custom labels for copy and copied states.

Input Accessibility

Clipboard with an input field.

Timeout Accessibility

Clipboard with custom timeout value.

Props

Prop Type Default Description
value text - The value to be copied to the clipboard.
timeout number 3000 The timeout for showing the 'copied' state (in ms).
class text - Additional CSS classes to apply.