Button

1import { Button } from '@/components/ui/button';
2
3export function Default() {
4  return <Button>Click me</Button>;
5}

1import { Plus, Settings } from 'lucide-react';
2import { Button } from '@/components/ui/button';
3
4export function Sizes() {
5  return (
6    <div className="flex flex-col gap-6">
7      <div className="flex flex-wrap items-center gap-4">
8        <Button size="sm">Small</Button>
9        <Button size="default">Default</Button>
10        <Button size="lg">Large</Button>
11        <Button size="icon" aria-label="Settings">
12          <Settings className="size-4" />
13        </Button>
14      </div>
15      <div className="flex flex-wrap items-center gap-4">
16        <Button size="sm" leftIcon={<Plus className="size-4" />}>
17          Add small
18        </Button>
19        <Button size="default" leftIcon={<Plus className="size-4" />}>
20          Add default
21        </Button>
22        <Button size="lg" leftIcon={<Plus className="size-5" />}>
23          Add large
24        </Button>
25      </div>
26    </div>
27  );
28}

1import { Button } from '@/components/ui/button';
2
3export function Secondary() {
4  return <Button variant="secondary">Secondary</Button>;
5}

1import { Button } from '@/components/ui/button';
2
3export function Destructive() {
4  return <Button variant="destructive">Destructive</Button>;
5}

1import { Button } from '@/components/ui/button';
2
3export function Outline() {
4  return <Button variant="outline">Outline</Button>;
5}

1import { Button } from '@/components/ui/button';
2
3export function Ghost() {
4  return <Button variant="ghost">Ghost</Button>;
5}

1import { Button } from '@/components/ui/button';
2
3export function Link() {
4  return <Button variant="link">Link</Button>;
5}