Components
Loading preview...
@starc007
npx shadcn@latest add https://21st.dev/r/starc007/be-ui-button"use client";
import { ArrowRight, Download, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/be-ui-button";
export default function ButtonBasePreview() {
return (
<div className="flex flex-col items-center gap-6">
<div className="flex flex-wrap items-center justify-center gap-3">
<Button variant="primary" size="md">
Continue
<ArrowRight className="h-4 w-4" />
</Button>
<Button variant="secondary" size="md">
<Download className="h-4 w-4" />
Download
</Button>
<Button variant="outline" size="md">Outline</Button>
<Button variant="ghost" size="md">Ghost</Button>
</div>
<div className="flex flex-wrap items-center justify-center gap-3">
<Button variant="primary" size="sm">Small</Button>
<Button variant="primary" size="md">Medium</Button>
<Button variant="primary" size="lg">Large</Button>
<Button variant="secondary" size="icon" aria-label="Delete">
<Trash2 className="h-4 w-4" />
</Button>
</div>
<div className="flex flex-wrap items-center justify-center gap-3">
<Button variant="primary" size="md" ripple>Ripple</Button>
<Button variant="outline" size="md" ripple>Tap me</Button>
</div>
</div>
);
}