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

PropTypeDefault
onCopy?
() => Promise<void> | void
-
idleIcon?
ReactNode
-
loadingIcon?
ReactNode
-
successIcon?
ReactNode
-
className?
string
-
duration?
number
-
loadingDuration?
number
-
disabled?
boolean
-