Copy Button

Displays an icon button used to copy a value into the clipboard.

asChild

boolean

color

grayredpurplegreen

copyLabel

string

fullyDisabled

boolean

By default, the `disabled` prop will use the `aria-disabled` attribute to ensure that content remains focusable and accessible even when in a disabled state. If you are sure you want to disable the button and take measures to ensure its accessibility, you can set this prop to `true` to use the `disabled` attribute instead.

height

number

loading

boolean

size

123

width

number

Deprecated

state

deprecated
disablednormalloading

Also supports MarginProps: `m`, `mb`, `ml`, `mr`, `mt`, `mx`, `my`

Disable or hide the Copy Button when there is nothing to copy.

Use Copy Button within a Text Field slot when user might need to copy a unique value.

Admin Portal

3 variants found

CopyButton in Iam Policyadmin-portal

/p/:portalSessionId/log-streams/:logStreamId/s3

CopyButton in Event Structureadmin-portal

/p/:portalSessionId/log-streams/:logStreamId/generic-https

size 1 copybutton in Readonly Text Fieldadmin-portal
size=1

Dashboard

2 variants found

size 1 copybutton in Application Detailsdashboardstatic

/:environmentId/applications/:applicationId

<Flex align="center" gap="2" justify="between"> <Text size="2">{clientId}</Text> <CopyButton color="gray" size="1" onClick={() => { void navigator.clipboard.writeText(clientId); }} /> </Flex>
color=graysize=1
size 1 copybutton in Create Userland User Dialogdashboard
size=1

Context

PropTypeDefaultRequired
asChild
booleanno
color
"gray" | "red" | "purple" | "green"no
copyLabel
stringno
fullyDisabled
booleanno
height
numberno
loading
booleanno
size
"1" | "2" | "3"no
statedeprecated
"disabled" | "normal" | "loading"no
width
numberno

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

stateType: "disabled" | "normal" | "loading"

Usage

Used 23 times across 2 packages

Dashboard
13
Admin Portal
10

Variant Distribution

color

gray
100%

size

1
100%

Where it's used

23 files

/branding/edit

packages/dashboard/src/app/(private)/(chromeless)/branding/edit/edit-branding.tsx1

/:environmentId/applications/:applicationId

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/applications/[applicationId]/application-details.tsx1

/code-editor

packages/dashboard/src/app/(private)/code-editor/demo.tsx1
packages/dashboard/src/components/code-highlighter.tsx1
packages/dashboard/src/components/configuration/custom-domain/cname-step.tsx1
packages/dashboard/src/components/copy-input.tsx1
packages/dashboard/src/components/copy-text.tsx1
packages/dashboard/src/components/expandable-copy-text.tsx1
packages/dashboard/src/components/flags/onboarding-card.tsx1
packages/dashboard/src/components/obfuscate-input.tsx1

Show 13 more files