Components
Loading preview...
Here is Prime Button component
@iamsatish4564
npx shadcn@latest add https://21st.dev/r/iamsatish4564/prime-button'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>
);
}