A button that becomes its own progress bar while uploading, then a check mark. No extra UI needed.
"use client"
import { demoAdapter } from "@/examples/_demo"
import { UploadMorphButton } from "@/components/upload-morph-button"
export default function UploadMorphButtonExample() {
return (
<div className="flex justify-center">
<UploadMorphButton adapter={demoAdapter}>Upload report</UploadMorphButton>
</div>
)
}
Installation
npx shadcn@latest add @uploadcn/upload-morph-buttonUsage
import { UploadMorphButton } from "@/components/upload-morph-button"<UploadMorphButton accept="application/pdf">Upload report</UploadMorphButton>The width animates with motion's layout, and the label cross-fades between states. The state is announced through aria-live.
Props
Prop
Type