Button

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

export default function Basic() {
  return (
    <>
      <Button>Button</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

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

export default function Sizes() {
  return (
    <>
      <Button size="sm">Small</Button>
      <Button>Default</Button>
      <Button size="lg">Large</Button>
    </>
  );
}

import { Button } from "@/components/ui/button";
import { Check } from "@mynaui/icons-react";

export default function WithIcons() {
  return (
    <>
      <Button size="sm">
        <Check className="size-3.5" stroke={2} />
        Small
      </Button>
      <Button>
        <Check className="size-4" stroke={2} />
        Default
      </Button>
      <Button size="lg">
        <Check className="-ml-2 size-6" stroke={2} />
        Large
      </Button>
    </>
  );
}

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

export default function Disabled() {
  return (
    <>
      <Button size="sm" disabled>
        Small
      </Button>
      <Button disabled>Default</Button>
      <Button size="lg" disabled>
        Large
      </Button>
    </>
  );
}

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { CheckCircle } from "@mynaui/icons-react";

export default function Button5() {
  return (
    <>
      <Button variant="outline">
        Commits
        <Badge
          variant="outline"
          className="font-mono text-muted-foreground -me-1"
        >
          42
        </Badge>
      </Button>
      <Button variant="outline">
        <Badge
          variant="outline"
          className="font-mono text-muted-foreground -ms-1"
        >
          4
        </Badge>
        Files Changed
      </Button>
      <Button variant="outline">
        <CheckCircle className="stroke-2" />
        Checks
        <Badge
          variant="outline"
          className="font-mono text-muted-foreground -me-1"
        >
          24
        </Badge>
      </Button>
    </>
  );
}