CopyButton

Small utility component for copying text values to the clipboard with optional toast feedback. Used inside components like CodeBlock and QRCode to standardize UX.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Basic

Icon-only copy button with default toast feedback.

Loading demo…

import

 

{

 

CopyButton

,

 

Card

,

 

Flex

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Card

 

p

=

{

16

}

 

variant

=

"outline"

>

      

<Flex

 

direction

=

"row"

 

align

=

"center"

 

gap

=

{

12

}

>

        

<Text

 

size

=

"sm"

>

Invite

 

Code

:

</Text

>

        

<Text

 

weight

=

"semibold"

>

ABCD

-

1234

</Text

>

        

<CopyButton

 

value

=

"ABCD-1234"

 

/>

      

</Flex

>

    

</Card

>

  

)

;

}

Labeled

Copy control showing label text instead of icon-only presentation.

Loading demo…

import

 

{

 

CopyButton

,

 

Card

,

 

Flex

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Card

 

p

=

{

16

}

 

variant

=

"outline"

>

      

<Flex

 

direction

=

"column"

 

gap

=

{

12

}

>

        

<Text

 

size

=

"sm"

 

weight

=

"semibold"

>

API

 

Key

</Text

>

        

<Flex

 

direction

=

"row"

 

gap

=

{

8

}

 

align

=

"center"

>

          

<Text

 

size

=

"xs"

 

style

=

{

{

maxWidth

:

 

240

 

}

}

>

sk_live_1a2b3c4d5e6f7g8h9i10

</Text

>

          

<CopyButton

 

value

=

"sk_live_1a2b3c4d5e6f7g8h9i10"

 

iconOnly

=

{

false

}

 

label

=

"Copy Key"

 

/>

        

</Flex

>

      

</Flex

>

    

</Card

>

  

)

;

}

Long Value

Long value truncation in toast (shows ellipsis for >60 chars).

Loading demo…

import

 

{

 

CopyButton

,

 

Card

,

 

Flex

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

longToken

=

 

'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.long.payload.value.with.many.sections.and.characters.for.demo.purposes.only'

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Card

 

p

=

{

16

}

 

variant

=

"outline"

>

      

<Flex

 

direction

=

"column"

 

gap

=

{

12

}

>

        

<Text

 

size

=

"sm"

 

weight

=

"semibold"

>

JWT

 

Token

</Text

>

        

<Text

 

size

=

"xs"

 

style

=

{

{

maxWidth

:

 

520

 

}

}

>

{

longToken

}

</Text

>

        

<CopyButton

 

value

=

{

longToken

}

 

iconOnly

=

{

false

}

 

label

=

"Copy Token"

 

/>

      

</Flex

>

    

</Card

>

  

)

;

}

No Toast

Copy control with toast notifications disabled.

Loading demo…

import

 

React

,

 

{

useState

}

 

from

 

'react'

;

import

 

{

 

CopyButton

,

 

Card

,

 

Flex

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

export

 

function

 

Demo

(

)

 

{

  

const

 

[

copiedValue

,

setCopiedValue

]

 

=

useState

<

string

 

|

 

null

>

(

null

)

;

  

return

 

(

    

<Card

 

p

=

{

16

}

 

variant

=

"outline"

>

      

<Flex

 

direction

=

"column"

 

gap

=

{

12

}

>

        

<Flex

 

direction

=

"row"

 

gap

=

{

8

}

 

align

=

"center"

>

          

<Text

 

size

=

"sm"

>

Secret

:

</Text

>

          

<Text

 

weight

=

"semibold"

>

hunter2

</Text

>

          

<CopyButton

 

value

=

"hunter2"

disableToast

onCopy

=

{

(

v

)

 

=>

 

setCopiedValue

(

v

)

}

 

iconOnly

=

{

false

}

 

label

=

"Copy"

 

/>

        

</Flex

>

        

{

copiedValue

&&

 

<Text

 

size

=

"xs"

 

color

=

"success"

>

Copied

locally

:

 

{

copiedValue

}

</Text

>

}

      

</Flex

>

    

</Card

>

  

)

;

}

Sizes

Scale the copy affordance with the size prop, from xs through 3xl.

Loading demo…

import

 

{

 

Block

,

 

CopyButton

,

 

Row

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

 

SIZES

 

=

 

[

'xs'

,

 

'sm'

,

 

'md'

,

 

'lg'

,

 

'xl'

,

 

'2xl'

,

 

'3xl'

]

as

const

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Row

 

align

=

"center"

 

gap

=

"lg"

 

wrap

=

"wrap"

>

      

{

SIZES

.

map

(

(

size

)

 

=>

 

(

        

<Block

 

key

=

{

size

}

 

align

=

"center"

>

          

<CopyButton

 

size

=

{

size

}

 

value

=

"@platform-blocks/react-ui-library"

 

/>

          

<Text

 

variant

=

"small"

>

{

size

}

</Text

>

        

</Block

>

      

)

)

}

    

</Row

>

  

)

;

}

Scan to open this page on your phonereact-ui-library.com/components/CopyButton

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

ComponentsChartsHooks

Docs

Getting StartedLocalizationllms.txt

Resources

FAQChangelogAccessibilitySitemap