npm

Components

Spinner

A continuously spinning indicator that signals an in-progress operation when the wait time is short or indeterminate.

Basic usage

Drop in a Spinner for the default 16 px spinner that inherits the current text color. It ships with role="status" and a Vietnamese aria-label of “Đang tải” — pass your own label in an English interface.

Sizes

Scale the spinner with any Tailwind size-* utility — your class is merged last, so it overrides the built-in size-4.

Color

The spinner stroke uses currentColor, so any text-* utility recolors it. Reach for an -ink token: the spinner is a standalone mark on the page background, which is exactly the role those tokens carry in both palettes.

Labelling

Because {...props} is spread after the defaults, both the role and the label are yours to replace. A spinner standing alone should name the operation; a spinner sitting next to text that already says “Uploading” should be silenced with aria-hidden so the message is not announced twice.

Uploading 3 files…

Inside a button

You rarely need to place a spinner in a button by hand: Button has a loading prop that drops its own aria-hidden spinner into the left icon slot and disables the button for you. Compose Spinner manually only on a surface that Button does not cover.

Props

PropTypeDefaultDescription
classNamestring—Tailwind classes merged onto the icon after its own size-4 animate-spin, so anything you pass wins. Use size-* to scale and text-* to recolor.
rolestring'status'Set on the icon by default so assistive technology treats it as a status region. Overridable — pass role="presentation" for a purely decorative spinner.
aria-labelstring'Đang tải'The package default is Vietnamese. Override it with your own copy in a non-Vietnamese UI, or pass aria-hidden when adjacent text already says it.
...restReact.ComponentProps<'svg'>—All native SVG attributes are forwarded to the underlying Loader2 icon. The exported type is SpinnerProps.

Accessibility

  • The spinner ships with role="status" so assistive technology announces it as a live status region.
  • The default aria-label is the package’s Vietnamese string “Đang tải”. In an English product, override it on every instance and describe the specific task — aria-label="Saving changes".
  • When the spinner sits next to visible text inside a button or label, add aria-hidden to avoid a redundant announcement.
  • The rotation is Tailwind’s animate-spin, which is not gated on prefers-reduced-motion. In a view that could show several at once, add motion-reduce:animate-none — and when the wait is measurable, prefer Progress, whose bar carries no decorative motion at all.