Button

A versatile button component that displays different states with icons. Perfect for showing upload status, form submission states, or any action feedback.

Preview

Installation

Step 1: Install dependencies

npm install class-variance-authority tailwind-merge

Step 2: Add icons to your public folder

Make sure you have these icon files in /public/icons/:

file.svg, cross-small.svg, pending.svg, inprogress.svg
submitted.svg, inreview.svg, success.svg, expired.svg

Step 3: Copy the component code

registry/default/ui/button/button.tsx

// ...complete Button component code as given

Usage

import Button from "@/components/ui/button"
 
export default function MyComponent() {
  return (
    <div className="space-y-4">
      <Button name="Click me" variant="default" />
      <Button name="Upload Complete" variant="Success" />
      <Button name="Upload Failed" variant="Failed" />
    </div>
  )
}

Variants

Status Variants

Workflow Variants

Props

Button Props

The Button component supports the following props:

Prop	Type	Default	Description
`name`	`string`	–	The text to display in the button
`variant`	`"default"` \| `"Success"` \| `"Failed"` \| `"Pending"` \| `"InProgress"` \| `"Submitted"` \| `"InReview"` \| `"Expired"`	`"default"`	The visual style and icon
`size`	`"default"` \| `"medium"` \| `"large"`	`"default"`	The size of the button
`className`	`string`	–	Additional CSS classes
`onClick`	`() => void`	–	Click handler function

Examples

File Upload Status

function FileUpload() {
  const [status, setStatus] = useState('default')
 
  return (
    <div className="space-y-4">
      <Button name="Choose File" variant="default" onClick={handleUpload} />
      <Button name="Uploading..." variant="InProgress" />
      <Button name="Upload Complete" variant="Success" />
    </div>
  )
}

Form Submission

function SubmitForm() {
 
  const handleSubmit = () =>{
    console.log("The form is being submitted")
  }
 
  return (
    <div className="flex gap-3">
      <Button name="Submit" variant="Submitted" onClick={handleSubmit}/>
      <Button name="Under Review" variant="InReview" />
      <Button name="Approved" variant="Success" />
    </div>
  )
}