Buttons

Copy Button

Copy text to the clipboard with success feedback.

Import

tsx

import { CopyButton } from "@cronus-ui/ui";

bash

npx cronus-ui add copy-button

Examples

Default

An icon button that writes `value` to the clipboard and swaps to a check for a moment. It manages its own copied state.

tsx

<CopyButton value="npm install @cronus-ui/ui" />

Inline with a value

Drop it next to a value the user might copy, such as an API key or command. Use `copyLabel` / `copiedLabel` to localise the accessible text, and the outline variant to sit flush with a field.

cronus_sk_live_…a1b2

tsx

<div className="flex items-center gap-2">
  <code className="rounded bg-surface-inset px-2 py-1 font-mono text-sm">cronus_sk_live_…a1b2</code>
  <CopyButton
    value="cronus_sk_live_a1b2"
    variant="outline"
    copyLabel="Copy API key"
    copiedLabel="API key copied"
  />
</div>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component CopyButtonDefault layout:inline style:copy-button {
  value:"cronus-ui"
  aria-label:"Copy"
  label "Copy"
}

page "/audit/copy-button/default" type:custom {
  use CopyButtonDefault
}

API Reference

Generated from the component's exported types.

CopyButtonProps

Extends Omit<ButtonProps, "value" | "children">

Prop	Type	Default	Description
`value`*	`string`	—	Text written to the clipboard when the button is pressed.
`timeout`	`number`	`1500`	Milliseconds the "copied" state stays visible before reverting. Defaults to 1500.
`copyLabel`	`string`	`"Copy"`	Accessible label shown to assistive tech in the idle state. Defaults to "Copy".
`copiedLabel`	`string`	`"Copied"`	Accessible label announced after a successful copy. Defaults to "Copied".
`variant`	`string`	—	Visual variant.
`size`	`string`	—	Control size.
`asChild`	`boolean`	—	Render as the child element via Slot.
`disabled`	`boolean`	—	Disables pointer and keyboard interaction.
`type`	`string`	—	Native type of the underlying element.
`className`	`string`	—	Additional class names merged onto the root.