Spinner
A spinner for indeterminate loading / pending feedback.
Controls
import { Spinner } from "raft-ui";
<Spinner />sizedefault: "sm""xs" | "sm" | "md" | "lg"
Grid size. The spinner is a 2×2 pixel grid whose pixels grow from 4px at xs to 8px at lg.
variantdefault: "default""default" | "inverse"
Use inverse on dark surfaces so the spinner keeps enough contrast.
aria-labeldefault: "Loading"string
Accessible label announced by screen readers.
renderReactElement | (props, state) => ReactElement
Base UI render hook for changing the root element.
...propsHTMLAttributes<HTMLSpanElement>
Native span attributes. Use className for color/positioning and data-icon inline placement.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "sm" | Grid size. The spinner is a 2×2 pixel grid whose pixels grow from 4px at xs to 8px at lg. |
variant | "default" | "inverse" | "default" | Use inverse on dark surfaces so the spinner keeps enough contrast. |
aria-label | string | "Loading" | Accessible label announced by screen readers. |
render | ReactElement | (props, state) => ReactElement | — | Base UI render hook for changing the root element. |
...props | HTMLAttributes<HTMLSpanElement> | — | Native span attributes. Use className for color/positioning and data-icon inline placement. |