Skip to content
v0.2.10

Spinner

A sized loading indicator with an optional accessible status label.

Preview
Loading workspace

Use Spinner

Spinner is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood
Example import style
spinner.tsxTSX
"use client";

import { FloodRoot, Spinner } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Spinner label="Loading workspace" />
    </FloodRoot>
  );
}

Design notes

  • Standalone indicators expose a status with a localizable label. Decorative indicators are hidden from assistive technology.
  • Button loading uses this indicator decoratively and keeps the button name. Do not announce every spinner in a busy area.
  • Use Progress when completion is measurable. Reduced motion stops rotation. Available in 0.2.4.

API reference

PropValuesDefault
size"sm" | "md" | "lg""md"
labelstring"Loading"
decorativebooleanfalse
Native HTML propsOmit<HTMLAttributes<HTMLSpanElement>, "children" | "role" | "aria-label" | "aria-hidden">Forwarded
View TypeScript source