Prime Button

Buttons 3

About

Here is Prime Button component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Prime Button to your project and fits it to your theme.

Code

How Prime Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import { useState } from 'react';
import { PrimeButton } from '@/components/ui/prime-button';
import { Trash2, CloudUpload, UserPlus } from 'lucide-react';

export default function DemoPrimeButtonVariants() {
// State for independent buttons
const [deleteStatus, setDeleteStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
const [uploadStatus, setUploadStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
const [inviteStatus, setInviteStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');

const handleAction = (
  setter: React.Dispatch<React.SetStateAction<'idle' | 'loading' | 'success' | 'error'>>
) => {
  setter('loading');
  setTimeout(() => setter('success'), 1500);
};

// NOTE: This layout uses container queries (@sm, @lg, etc.).
// For this to work in your own application, the parent element of this component
// must have the Tailwind CSS class "@container".
return (
  <div className="grid w-full grid-cols-1 gap-8 rounded-lg border border-dashed bg-background p-8 @md:grid-cols-3">
    
    {/* Destructive Variant */}
    <div className="flex flex-col items-center gap-3">
      <span className="text-xs font-medium text-muted-foreground">Destructive</span>
      <PrimeButton
        variant="destructive"
        actionState={deleteStatus}
        onClick={() => handleAction(setDeleteStatus)}
        successText="Deleted"
        loadingText="Deleting..."
      >
        <Trash2 className="mr-2 h-4 w-4" />
        Delete Account
      </PrimeButton>
    </div>

    {/* Outline Variant */}
    <div className="flex flex-col items-center gap-3">
      <span className="text-xs font-medium text-muted-foreground">Outline</span>
      <PrimeButton
        variant="outline"
        actionState={uploadStatus}
        onClick={() => handleAction(setUploadStatus)}
        loadingText="Uploading"
        successText="Done"
      >
        <CloudUpload className="mr-2 h-4 w-4" />
        Upload File
      </PrimeButton>
    </div>

    {/* Secondary + Large Size */}
    <div className="flex flex-col items-center gap-3">
      <span className="text-xs font-medium text-muted-foreground">Secondary (lg)</span>
      <PrimeButton
        variant="secondary"
        size="lg"
        actionState={inviteStatus}
        onClick={() => handleAction(setInviteStatus)}
        successText="Sent!"
      >
        <UserPlus className="mr-2 h-4 w-4" />
        Invite Team
      </PrimeButton>
    </div>
  </div>
);
}