CopyButton

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

Import

import { CopyButton } from 'asterui'

Examples

Basic Usage

Simple copy button with default icon. Enable tooltip for visual feedback.

</>

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="Hello, World!" />
        <CopyButton text="Copy this text" showTooltip />
      </Space>
    )
}

export default App

With Text Content

Display text content instead of the default icon.

</>

npm install asteruipnpm add asterui

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical">
        <CopyButton text="npm install asterui">
          npm install asterui
        </CopyButton>
        <CopyButton text="pnpm add asterui" copiedChildren="Copied!">
          pnpm add asterui
        </CopyButton>
      </Space>
    )
}

export default App

Colors

Apply different color themes to the button.

</>

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="primary" color="primary" showTooltip />
        <CopyButton text="secondary" color="secondary" showTooltip />
        <CopyButton text="accent" color="accent" showTooltip />
        <CopyButton text="success" color="success" showTooltip />
      </Space>
    )
}

export default App

Variants

Different button style variants.

</>

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="solid" color="primary" />
        <CopyButton text="outline" color="primary" variant="outline" />
        <CopyButton text="ghost" variant="ghost" />
        <CopyButton text="soft" color="primary" variant="soft" />
      </Space>
    )
}

export default App

Sizes

Available button sizes.

</>

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space align="center">
        <CopyButton text="xs" size="xs" />
        <CopyButton text="sm" size="sm" />
        <CopyButton text="md" size="md" />
        <CopyButton text="lg" size="lg" />
        <CopyButton text="xl" size="xl" />
      </Space>
    )
}

export default App

Shapes

Square and circle button shapes.

</>

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="square" shape="square" />
        <CopyButton text="circle" shape="circle" />
      </Space>
    )
}

export default App

Code Block

Copy button positioned in the corner of a custom code block.

</>

import { CopyButton } from 'asterui'

export const App = () => (
  <CopyButton text="Hello!" showTooltip />
)

import { CopyButton } from 'asterui'

function App() {
  const codeText = `import { CopyButton } from 'asterui'
  
  export const App = () => (
    <CopyButton text="Hello!" showTooltip />
  )`
  
  return (
      <div style={{ position: 'relative' }} className="bg-base-300 rounded-lg p-4 pr-12">
        <pre className="font-mono text-sm whitespace-pre">{codeText}</pre>
        <div style={{ position: 'absolute', top: 8, right: 8 }}>
          <CopyButton text={codeText} size="sm" variant="ghost" showTooltip />
        </div>
      </div>
    )
}

export default App

Input with Copy

Copy the value from an input field.

</>

import { CopyButton, Input } from 'asterui'
import { useState } from 'react'

function App() {
  const [value, setValue] = useState('https://asterui.com')
  
  return (
      <div className="flex gap-2">
        <Input value={value} onChange={(e) => setValue(e.target.value)} />
        <CopyButton text={value} color="primary" showTooltip />
      </div>
    )
}

export default App

Callbacks

Handle copy success and error events.

</>

Copy with callback

import { CopyButton } from 'asterui'

function App() {
  return (
      <CopyButton
        text="Callback example"
        color="primary"
        onCopy={() => console.log('Copied!')}
        onError={(err) => console.error('Failed:', err)}
      >
        Copy with callback
      </CopyButton>
    )
}

export default App

Custom Timeout

Control how long the copied state is shown.

</>

1s timeout5s timeout

import { CopyButton, Space } from 'asterui'

function App() {
  return (
      <Space>
        <CopyButton text="1 second" timeout={1000}>1s timeout</CopyButton>
        <CopyButton text="5 seconds" timeout={5000}>5s timeout</CopyButton>
      </Space>
    )
}

export default App

API

CopyButton

Property	Description	Type	Default
text	Text to copy to clipboard	string	-
timeout	Duration in ms to show copied state	number	2000
color	Button color	'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'neutral'	-
variant	Button style variant	'solid' | 'outline' | 'dash' | 'soft' | 'ghost' | 'link'	-
size	Button size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
shape	Button shape	'square' | 'circle'	-
icon	Custom icon for default state	ReactNode	Copy icon
copiedIcon	Custom icon for copied state	ReactNode	Check icon
children	Custom content for default state (overrides icon)	ReactNode	-
copiedChildren	Custom content for copied state	ReactNode	-
onCopy	Callback when copy succeeds	() => void	-
onError	Callback when copy fails	(error: Error) => void	-
showTooltip	Show tooltip with copy status	boolean	false
tooltipText	Tooltip text for default state	string	'Copy'
copiedTooltipText	Tooltip text for copied state	string	'Copied!'
disabled	Disable the button	boolean	false

Accessibility

• Uses native button element for keyboard support
• Visual feedback through icon change and optional tooltip
• Disabled state is properly communicated