A click to copy button for install commands, API keys, and coupon codes with copied feedback.
The import and the props worth knowing about, in one place.
import { Button17 } from "@/components/beste/component/button17";
// Copies `value` on click; icon flips to a check while copied.
<Button17 value="npx shadcn@latest init" prefix="$" />
<Button17
value="SAVE20"
label="Use code SAVE20" // display text (defaults to value)
tone="dark" // "neutral" (default) | "dark"
resetDelay={3000} // ms the copied state is shown
onCopy={() => console.log("coupon copied")}
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Click | Copies the value and says so; the label goes back after `resetDelay`. |
|---|
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | The text written to the clipboard |
label | string | — | Display text (defaults to value) |
prefix | string | — | Muted, non-copied prefix rendered before the label (e.g. "$" for shell commands) |
resetDelay | number | — | How long the copied state is shown, in ms |
tone | "neutral" | "dark" | — | Surface tone: bordered background (default) or solid dark |
onCopy | () => void | — | Called after a successful copy |
className | string | — | Additional classes merged onto the button |