1
5import * as React from "react";
6import { clsx } from "clsx";
7
8export interface SpinnerProps {
9 size?: "sm" | "md" | "lg";
10
11 label?: string;
12 className?: string;
13}
14
15const SIZE: Record<NonNullable<SpinnerProps["size"]>, string> = {
16 sm: "h-4 w-4 border-2",
17 md: "h-6 w-6 border-2",
18 lg: "h-8 w-8 border-[3px]",
19};
20
21export function Spinner({ size = "md", label, className }: SpinnerProps) {
22 return (
23 <span
24 role={label ? "status" : undefined}
25 aria-label={label}
26 aria-hidden={label ? undefined : true}
27 className={clsx(
28 "inline-block animate-spin rounded-full border-current border-t-transparent",
29 "text-muted-foreground",
30 SIZE[size],
31 className,
32 )}
33 />
34 );
35}
36