Spinner

import { Spinner } from "@/components/ui/spinner";

export default function Basic() {
  return (
    <>
      <Spinner />
      <Spinner />
    </>
  );
}

import { Spinner } from "@/components/ui/spinner";

export default function Basic() {
  return (
    <>
      <Spinner />
      <Spinner />
      <Spinner className="text-blue-500" />
      <Spinner className="text-blue-500" />
      <Spinner className="text-red-500" />
      <Spinner className="text-red-500" />
      <Spinner className="text-emerald-500" />
      <Spinner className="text-emerald-500" />
    </>
  );
}

import { Spinner } from "@/components/ui/spinner";

export default function Sizes() {
  return (
    <>
      <Spinner className="size-4" />
      <Spinner className="size-4" />
      <Spinner className="size-5" />
      <Spinner className="size-5" />
      <Spinner className="size-6" />
      <Spinner className="size-6" />
      <Spinner className="size-8" />
      <Spinner className="size-8" />
      <Spinner className="size-10" />
      <Spinner className="size-10" />
    </>
  );
}

import { Spinner } from "@/components/ui/spinner";

export default function WithText() {
  return (
    <div className="flex items-center gap-2">
      <Spinner className="size-4" />
      <span className="text-sm font-medium text-muted-foreground">
        Loading...
      </span>
    </div>
  );
}

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

export default function WithButton() {
  return (
    <Button disabled className="gap-2">
      <Spinner className="text-background" />
      Loading...
    </Button>
  );
}