Spinner

Usage

Choose a size and provide a label that describes the work in progress. Place the spinner alongside visible button text for pending actions, and disable duplicate submissions while work is pending.

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

Shipped as editable source in src/components/ui/spinner.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

import type { ComponentProps } from "react";
import { LoaderCircle } from "lucide-react";
import { cn } from "@dashboardpack/core/lib/utils";
export function Spinner({
  label = "Loading",
  size = "default",
  className,
  ...props
}: ComponentProps<"span"> & {
  label?: string;
  size?: "sm" | "default" | "lg";
}) {
  return (
    <span
      role="status"
      className={cn("inline-flex items-center justify-center", className)}
      {...props}
    >
      <LoaderCircle
        aria-hidden
        className={cn(
          "animate-spin motion-reduce:animate-none",
          size === "sm" ? "size-4" : size === "lg" ? "size-8" : "size-5",
        )}
      />
      <span className="sr-only">{label}</span>
    </span>
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

Build with these too