29 lines
728 B
TypeScript
29 lines
728 B
TypeScript
|
import "@shared/components/Spinner.css";
|
||
|
|
|
||
|
|
export type SpinnerSize = "xs" | "sm" | "md" | "lg";
|
||
|
|
|
||
|
|
export interface SpinnerProps {
|
||
|
|
size?: SpinnerSize;
|
||
|
|
/** Optional accessible label for screen readers. */
|
||
|
|
label?: string;
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Circular spinner. Inherits `currentColor` so it picks up the surrounding
|
||
|
|
* text colour — drop it into a Button, a banner, or a code header without
|
||
|
|
* any extra styling.
|
||
|
|
*/
|
||
|
|
export function Spinner({ size = "md", label, className }: SpinnerProps) {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
role="status"
|
||
|
|
aria-label={label}
|
||
|
|
aria-busy="true"
|
||
|
|
className={["sui-spinner", `sui-spinner--${size}`, className ?? ""]
|
||
|
|
.filter(Boolean)
|
||
|
|
.join(" ")}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|