ComponentsButton Copy
Button Copy
This component is an interactive button that visually changes state when clicked. The states are 'idle', 'loading', and 'success', represented by animated icons. When clicked, the button transitions from idle to loading and then to success, using smooth animations.
Code
1
Install with shadcn Beta
Terminal
npx shadcn@latest add "https://smoothui.dev/r/button-copy.json"Or install the demo
Terminal
npx shadcn@latest add "https://smoothui.dev/r/button-copy-demo.json"How to use
Demo.tsx
"use client"
import React from "react"
import ButtonCopy from "@/components/smoothui/ui/ButtonCopy"
const ButtonCopyDemo = () => {
return (
<ButtonCopy
onCopy={async () => {
await navigator.clipboard.writeText("Hello from ButtonCopy!")
}}
/>
)
}
export default ButtonCopyDemo
Props
| Prop | Type | Description |
|---|---|---|
| onCopy? | () => Promise<void> | void | Callback to perform the copy action. |
| idleIcon? | ReactNode | Icon to show when idle. |
| loadingIcon? | ReactNode | Icon to show when loading. |
| successIcon? | ReactNode | Icon to show on success. |
| className? | string | Optional additional class names for the root container. |
| duration? | number | How long to show the success state (ms). |
| loadingDuration? | number | How long to show the loading state (ms). |
| disabled? | boolean | If true, disables the button. |