Components
Loading preview...
Button component.
@osanabriasb
npx shadcn@latest add https://21st.dev/r/jefatura.frontend/buttonimport React from "react";
import { Button } from "@/components/ui/button";
export default function DemoOne() {
const [loading, setLoading] = React.useState(false);
const handleAsyncAction = () => {
setLoading(true);
setTimeout(() => setLoading(false), 2000);
};
return (
<div className="max-w-4xl mx-auto p-6 space-y-8">
<div className="space-y-2">
<h2 className="text-3xl font-bold tracking-tight">Button Component</h2>
<p className="text-muted-foreground">
A versatile button component with multiple variants, sizes, and states.
</p>
</div>
{/* Variantes estándar */}
<div className="space-y-4">
<h3 className="text-xl font-semibold">Standard Variants</h3>
<div className="flex flex-wrap gap-4">
<Button variant="default">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>
</div>
</div>
{/* Variantes premium */}
<div className="space-y-4">
<h3 className="text-xl font-semibold">Premium Variants</h3>
<div className="flex flex-wrap gap-4">
<Button variant="shimmer">Shimmer Effect</Button>
<Button variant="glow">Glow Effect</Button>
</div>
</div>
{/* Tamaños */}
<div className="space-y-4">
<h3 className="text-xl font-semibold">Sizes</h3>
<div className="flex items-center gap-4">
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">⚙️</Button>
</div>
</div>
{/* Estados interactivos */}
<div className="space-y-4">
<h3 className="text-xl font-semibold">Interactive States</h3>
<div className="flex flex-wrap gap-4">
<Button leftIcon="🚀" onClick={() => alert('Launched!')}>
Launch Project
</Button>
<Button rightIcon="→" variant="outline">
Continue
</Button>
<Button
loading={loading}
onClick={handleAsyncAction}
disabled={loading}
>
{loading ? 'Processing...' : 'Start Process'}
</Button>
<Button disabled>
Unavailable
</Button>
</div>
</div>
{/* Casos de uso realistas */}
<div className="space-y-4">
<h3 className="text-xl font-semibold">Real-world Examples</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="p-4 border rounded-lg space-y-3">
<h4 className="font-medium">Call to Action</h4>
<div className="space-x-2">
<Button size="lg">Get Started Free</Button>
<Button variant="outline" size="lg">Learn More</Button>
</div>
</div>
<div className="p-4 border rounded-lg space-y-3">
<h4 className="font-medium">Form Actions</h4>
<div className="space-x-2">
<Button variant="default">Save Changes</Button>
<Button variant="ghost">Cancel</Button>
</div>
</div>
</div>
</div>
</div>
);
}