Spinner

Spinner inherits currentColor and exposes sm, md, and lg sizes. Set label when it is not accompanied by visible loading text.

import { Spinner } from '@manti-ui/react';

export default function SpinnerBasic() {
  return (
    <>
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </>
  );
}

API

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Visual size.
`label`	`string`	`'Loading'`	Accessible label announced to assistive technology.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="spinner"][data-part="root"]`	The spinning indicator; inherits currentColor.

Tokens

Token	Controls
`--manti-spinner-size`	size
`--manti-spinner-thickness`	thickness

Last updated 13 September 2026