Clipboard

Used to copy text to the clipboard

'use client'

import { Clipboard } from '@saas-ui/react'

export const ClipboardBasic = () => {
  return (
    <Clipboard.Root value="https://saas-ui.dev">
      <Clipboard.IconButton />
    </Clipboard.Root>
  )
}

Anatomy

import { Clipboard } from '@saas-ui/react/clipboard'

<Clipboard.Root value="...">
  <Clipboard.Button />
  <Clipboard.IconButton />
  <Clipboard.Input />
</ClipboardRoot>

Examples

Copy Button

Use the Clipboard.Button or Clipboard.IconButton components to create a copy button.

'use client'

import { Clipboard } from '@saas-ui/react'

export const ClipboardWithButton = () => {
  return (
    <Clipboard.Root value="https://saas-ui.dev">
      <Clipboard.Button />
    </Clipboard.Root>
  )
}

Custom labels

Use the copied prop to change the label when the text is copied.

'use client'

import { Clipboard } from '@saas-ui/react'

export const ClipboardWithCustomLabels = () => {
  return (
    <Clipboard.Root value="https://saas-ui.dev">
      <Clipboard.Button copied="Gekopiëerd">Kopiëer</Clipboard.Button>
    </Clipboard.Root>
  )
}

Input

Use the Clipboard.Input component to create a copy input.

'use client'

import { Clipboard, InputGroup } from '@saas-ui/react'

export const ClipboardWithInput = () => {
  return (
    <Clipboard.Root
      maxW="300px"
      value="https://saas-ui.dev/docs/components/clipboard"
    >
      <InputGroup
        width="full"
        endElement={<Clipboard.IconButton me="-2" variant="ghost" />}
      >
        <Clipboard.Input />
      </InputGroup>
    </Clipboard.Root>
  )
}

Timeout

Use the timeout prop to change the duration of the copy message.

'use client'

import { Clipboard } from '@saas-ui/react'

export const ClipboardWithTimeout = () => {
  return (
    <Clipboard.Root value="https://saas-ui.dev" timeout={1000}>
      <Clipboard.Button />
    </Clipboard.Root>
  )
}

Props

Root

Prop	Default	Type
`timeout`	`'3000'`	`number` The timeout for the copy operation
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`ids`		`Partial<{ root: string; input: string; label: string }>` The ids of the elements in the clipboard. Useful for composition.
`onStatusChange`		`(details: CopyStatusDetails) => void` The function to be called when the value is copied to the clipboard
`value`		`string` The value to be copied to the clipboard

Checkbox

Close Button