Inputs@knitui/components
CopyButton
CopyButton is a renderless copy-to-clipboard controller. It has no visual of its own — it hands { copied, copy } to a render-prop child via children, which decides what to render. The copied flag resets to false after timeout ms (default 1 000 ms).
import { CopyButton } from "@knitui/components";Playground
Loading playground…
<CopyButton
value="https://example.com"
timeout={1000}
/>Examples
Basic Toggle
Render-prop child shows a simple text toggle between "Copy" and "Copied!".
Loading example…
Shadows
The shadow elevation ladder applied to the render-prop Button trigger, from xs to xl.
Loading example…
Icon Button
Uses an icon-only action button to demonstrate a compact copy trigger.
Loading example…
Multiple
Multiple independent CopyButtons on a single page — each manages its own state.
Loading example…
Short Timeout
Short timeout (500 ms) — the "Copied" feedback disappears faster than the default.
Loading example…
Long Timeout
Long timeout (5 000 ms) — the "Copied" feedback persists for 5 seconds.
Loading example…
Inline Code
Demonstrates full render-prop flexibility — child renders a styled code snippet with an embedded copy action.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children required | (payload: { copied: boolean; copy: () => void; }) => ReactNode | — | Render callback — receives the current `copied` flag and a `copy` action. |
value required | string | https://example.com | The string that will be written to the clipboard. |
timeout | number | undefined | 1000 | Duration in ms the `copied` flag stays true after a copy. |