Data Display
Forms
Navigation
Button
A button or a component that looks like a button.
import { Button } from "@/components/ui/button";
export default function Particle() {
return <Button>Button</Button>;
}
Installation
pnpm dlx cnippet@latest add button
Usage
import { Button } from "@/components/ui/button";<Button>Button</Button>Link
You can use the render prop to make another component look like a button. Here's an example of a link that looks like a button.
import Link from "next/link";
import { Button } from "@/components/ui/button";
export function LinkAsButton() {
return <Button render={<Link href="/login" />}>Login</Button>;
}Variants
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import Link from "next/link";
export default function Particle() {
return (
<div className="space-y-4">
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>Default</p>
<Button>Button</Button>
</div>
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>Outline</p>
<Button variant="outline">Outline</Button>
</div>
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>Secondary</p>
<Button variant="secondary">Secondary</Button>
</div>
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>Destructive</p>
<Button variant="destructive">Delete</Button>
</div>
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>Destructive outline</p>
<Button variant="destructive-outline">Delete</Button>
</div>
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>Ghost</p>
<Button variant="ghost">Ghost</Button>
</div>
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>W/ Link</p>
<Button render={<Link href="/" />}>Link</Button>
</div>
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>W/ Loading</p>
<Button disabled>
<Spinner />
Loading...
</Button>
</div>
</div>
);
}
Sizes
Extra small
Small
Large
Extra Large
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import Link from "next/link";
export default function Particle() {
return (
<div className="space-y-4">
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>Extra small</p>
<Button size="xs">Button</Button>
</div>
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>Small</p>
<Button size="sm">Button</Button>
</div>
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>Large</p>
<Button size="lg">Button</Button>
</div>
<div className="flex items-center justify-between gap-10 [&_p]:text-xs">
<p>Extra Large</p>
<Button size="xl">Button</Button>
</div>
</div>
);
}
On This Page