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
4const basicButtons = [
5  { size: 'sm' as const, label: 'Small' },
6  { size: 'default' as const, label: 'Default' },
7  { size: 'lg' as const, label: 'Large' },
8];
9
10const iconButtons = [
11  { size: 'sm' as const, label: 'Add small', icon: <Plus className="size-4" /> },
12  { size: 'default' as const, label: 'Add default', icon: <Plus className="size-4" /> },
13  { size: 'lg' as const, label: 'Add large', icon: <Plus className="size-5" /> },
14];
15
16export function Sizes() {
17  return (
18    <div className="flex flex-col gap-6">
19      <div className="flex flex-wrap items-center gap-4">
20        {basicButtons.map((btn) => (
21          <Button key={btn.size} size={btn.size}>
22            {btn.label}
23          </Button>
24        ))}
25        <Button size="icon" aria-label="Settings">
26          <Settings className="size-4" />
27        </Button>
28      </div>
29      <div className="flex flex-wrap items-center gap-4">
30        {iconButtons.map((btn) => (
31          <Button key={btn.size} size={btn.size} leftIcon={btn.icon}>
32            {btn.label}
33          </Button>
34        ))}
35      </div>
36    </div>
37  );
38}

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}