ComponentProduct

Spinner

Loading indicator that uses the surrounding text color.

$ npx context-ds add spinner

In the product

Usage

Use it for

Buttons and inline waits under a second or two.

Avoid

Full-page spinners

Dependencies: lucide-react

Example

examples/spinner.tsx

import { Button } from "@/components/ui/button";import { Spinner } from "@/components/ui/spinner";export function Product() {  return (    <div className="flex items-center gap-4">      <Spinner className="text-fg-subtle" />      <Button variant="brand" disabled>        <Spinner className="size-3.5" /> Running      </Button>    </div>  );}

Source

components/ui/spinner.tsx

import * as React from "react";import { Loader2 } from "lucide-react";import { cn } from "@/lib/utils";// The dashboard's spinner: a thin ring turning once a second, in the color of the text around it.function Spinner({ className, ...props }: React.ComponentProps<"svg">) {  return <Loader2 role="status" aria-label="Loading" data-slot="spinner" className={cn("size-4 animate-spin", className)} strokeWidth={1.5} {...props} />;}export { Spinner };

Reference: src/components/dashboard/PausePlanModal.tsx (Loader2 animate-spin).