Component
Spinner
The console's turning eight-spoke glyph, in the color of the text around it.
npx -y github:anwarlemu/inkbox-brand-cli#release add spinnerUsage
Use inside the thing that is working: at the right of a field while the handle is checked (text-fg-brand), before the label of a button that is creating (Creating Agent Identity...). Disable the button while it spins.
Avoid
- A full-page spinner for a short wait
- A spinner without a label or button text saying what is happening
- Colored spinners
Exports: Spinner. Read the examples for composition and props.
Dependencies: @phosphor-icons/react.
Example
import { Button } from "@/components/ui/button";import { Input } from "@/components/ui/input";import { Spinner } from "@/components/ui/spinner";export function Preview() { return ( <div className="grid w-full max-w-100 gap-4"> <div className="relative"> <Input aria-label="Agent handle" defaultValue="acme-support" className="pr-10" /> <Spinner className="absolute top-1/2 right-3 -translate-y-1/2 text-fg-brand" /> </div> <Button disabled className="w-full"> <Spinner /> Creating Agent Identity... </Button> </div> );}export function Sizes() { return ( <div className="flex items-center gap-4 text-fg-brand"> <Spinner className="size-4" /> <Spinner /> <Spinner className="size-8" /> </div> );}Source
import { SpinnerIcon } from "@phosphor-icons/react/ssr";import { cn } from "@/lib/utils";// The console's loading glyph (Figma 427:2715: the handle check, Creating Agent Identity...): eight short spokes// turning once every 0.8s at a constant speed, in the color of the text around it (the purple in a field, white on the// purple pill). It keeps turning with reduced motion: the turning is the only sign that work is happening.function Spinner({ className, ...props }: React.ComponentProps<"svg">) { return <SpinnerIcon role="status" weight="bold" aria-label="Loading" data-slot="spinner" className={cn("size-5.5 shrink-0 animate-spin-steady", className)} {...props} />;}export { Spinner };Reference: Figma 427:2715: Modal States (Handle check, Creating...).