Button

import { ArrowUpIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

export function ButtonDemo() {
  return (
    <div className="flex gap-3">
      <Button>Button</Button>
      <Button size="icon">
        <ArrowUpIcon />
      </Button>
    </div>
  );
}

import { Button } from "@/components/ui/button";

function ButtonVariants() {
  return (
    <div className="flex flex-wrap md:flex-nowrap items-center gap-3">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="tertiary">Tertiary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="destructive-soft">Destructive Soft</Button>
    </div>
  );
}

export ButtonVariants;

import { SearchIcon } from "lucide-react";
import { Button } from "@/components/ui/button";

export function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="sm">Small</Button>
      <Button>Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon-sm" aria-label="Search small icon button">
        <SearchIcon className="h-3 w-3" />
      </Button>
      <Button size="icon" aria-label="Search default icon button">
        <SearchIcon className="h-4 w-4" />
      </Button>
      <Button size="icon-lg" aria-label="Search large icon button">
        <SearchIcon className="h-5 w-5" />
      </Button>
    </div>
  );
}

import {
  ArrowRightIcon,
  DownloadIcon,
  SearchIcon,
  Trash2Icon,
} from "lucide-react";
import { Button } from "@/components/ui/button";

export function ButtonIcons() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button>
        <SearchIcon className="mr-2 h-4 w-4" />
        Search
      </Button>
      <Button variant="secondary">
        <DownloadIcon className="mr-2 h-4 w-4" />
        Download
      </Button>
      <Button variant="outline">
        Next
        <ArrowRightIcon className="ml-2 h-4 w-4" />
      </Button>
      <Button variant="destructive">
        Delete <Trash2Icon />
      </Button>
    </div>
  );
}