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 { Mail } from 'lucide-react';
export default function DemoPrimeButtonCustomText() {
const [subStatus, setSubStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
const [connectStatus, setConnectStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
const handleSuccessFlow = () => {
setSubStatus('loading');
setTimeout(() => setSubStatus('success'), 2000);
};
const handleErrorFlow = () => {
setConnectStatus('loading');
// Simulate a network failure
setTimeout(() => setConnectStatus('error'), 2000);
};
// 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-2">
{/* Customized Success Messages */}
<div className="flex flex-col items-center justify-center gap-4 rounded-md border bg-muted/30 p-6">
<div className="text-center">
<h3 className="font-semibold">Newsletter</h3>
<p className="text-sm text-muted-foreground">Demonstrates custom text.</p>
</div>
<PrimeButton
actionState={subStatus}
onClick={handleSuccessFlow}
loadingText="Joining..."
successText="You're in!"
className="w-full max-w-[180px]"
>
<Mail className="mr-2 h-4 w-4" />
Subscribe
</PrimeButton>
</div>
{/* Error Handling Scenario */}
<div className="flex flex-col items-center justify-center gap-4 rounded-md border bg-muted/30 p-6">
<div className="text-center">
<h3 className="font-semibold">Server Connect</h3>
<p className="text-sm text-muted-foreground">Demonstrates error state.</p>
</div>
<PrimeButton
variant="outline"
actionState={connectStatus}
onClick={handleErrorFlow}
loadingText="Connecting..."
errorText="Failed"
className="w-full max-w-[180px]"
>
Connect API
</PrimeButton>
</div>
</div>
);
}