spinner.mdx

import { ComponentLinks, InteractiveCodeblock, PropsTable, } from "@/components/index";

Spinner

Spinners provide a visual cue that an action is either processing, awaiting a course of change or a result. It uses AdaptUI's Box component internally.

Imports

import { Spinner } from "@adaptui/react-tailwind";

Usage

<InteractiveCodeblock children={({ spreadProps }) => <Spinner ${spreadProps} />} themeProps={{ size: "spinner.size", track: "spinner.track" }} />

Spinner sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: xs sm md lg & em

import { Spinner } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex items-center space-x-2">
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
      <Spinner size="em" />
    </div>
  );
};

Show track

To show the subtle track around the spinner we can use the track which accepts visible or transparent values

import { Avatar, AvatarGroup } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex items-center space-x-2">
      <Spinner size="md" track="visible" />
      <Spinner size="md" track="transparent" />
    </div>
  );
};

With Label

Spinner has a label prop to provide an customized A11y label which is only visible to the screen readers.

import { Avatar, AvatarGroup } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="flex items-center space-x-2">
      <Spinner size="md" label="spinning" />
    </div>
  );
};

API Reference

<PropsTable data={[ { name: "size", themeKey: "spinner.size", default: "md" }, { name: "track", themeKey: "spinner.track", default: "transparent" }, { name: "label", type: "string", default: "Loading...", description: "For accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.", },

]} />