CopyButton

A clipboard button built on Button: it owns the copy itself, crossfades its glyph from clipboard to a check on success, and flips its accessible label — otherwise a plain Button you can dress for any context.

Standalone

Give it a getText callback — resolved at click time, so it can read live DOM — and the button copies and confirms on its own. With a visible label it reads as an ordinary action; the glyph still crossfades to a check and the accessible label flips to Copied for the brief confirmation window. Override copyLabel / copiedLabel to translate.

"use client";

import { CopyButton } from "@stridge/noctis";

export default function CopyButtonStandalone() {
    return (
        <CopyButton variant="secondary" getText={() => "npm install @stridge/noctis"}>
            Copy install command
        </CopyButton>
    );
}

Code affordance

The icon-only form a code block reaches for: pass iconOnly and set copyLabel so assistive technology can announce the control without visible text. It sizes to the shared code-copy step so it aligns with a code tab strip, and the clipboard glyph swaps to a check the instant the copy lands.

import { CopyButton } from "@stridge/noctis";

<CopyButton iconOnly getText={() => snippet} />;

"use client";

import { CopyButton } from "@stridge/noctis";

const SNIPPET = `import { CopyButton } from "@stridge/noctis";

<CopyButton iconOnly getText={() => snippet} />;`;

export default function CopyButtonCodeAffordance() {
    return (
        <div className="flex items-start justify-between gap-4 rounded-md bg-surface p-4 font-mono text-sm">
            <pre className="overflow-x-auto whitespace-pre">{SNIPPET}</pre>
            <CopyButton variant="ghost" iconOnly copyLabel="Copy code" getText={() => SNIPPET} />
        </div>
    );
}

Design tokens

Generated from the component's declaration — the same graph that mints the CSS, so a variable name or its resolution default can't drift. The minted tokens are the public override seam: set one on any ancestor and every copy button in that region retunes — e.g. .docs-code { --noctis-code-copy-size: 2rem; } resizes every icon-only affordance beneath it. Knobs that aren't minted are reached through the part's data-slot. See Customization for the full override ladder and Tokens for the whole graph.

API reference

Generated from the component's types — every prop, type, default, and description comes straight from the source. CopyButton extends the Button props (minus the onClick, aria-label, and title it owns), so variant, size, iconOnly, and the native button attributes pass straight through; expand a row for the full type and description.