'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' | numberThe timeout for the copy operation |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
defaultValue | stringThe initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard. | |
id | stringThe unique identifier of the machine. | |
ids | Partial<{ root: string; input: string; label: string }>The ids of the elements in the clipboard. Useful for composition. | |
onStatusChange | (details: CopyStatusDetails) => voidThe function to be called when the value is copied to the clipboard | |
onValueChange | (details: ValueChangeDetails) => voidThe function to be called when the value changes | |
value | stringThe controlled value of the clipboard |