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

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.