Spinner

Used for indicating an unspecified wait time.

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage


import { Spinner } from "@optiaxiom/react";
 
export function App() {
  return <Spinner />;
}

#
Size

Use the size prop to select between the different sizes.


import { Group, Spinner } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group gap="16">
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </Group>
  );
}

#
Label

Use children to show an optional label for the spinner.


import { Spinner } from "@optiaxiom/react";
 
export function App() {
  return <Spinner>Loading...</Spinner>;
}

#
Appearance

Set the appearance prop to inverse when displaying spinner on dark background.

Appearance


"use client";
 
import type { ComponentPropsWithRef } from "react";
 
import { Spinner } from "@optiaxiom/react";
 
export function App({
  appearance = "inverse",
}: Pick<ComponentPropsWithRef<typeof Spinner>, "appearance">) {
  return (
    <Spinner
      appearance={appearance}
      bg={appearance === "default" ? "bg.default" : "bg.default.inverse"}
      p="8"
      rounded="sm"
      size="sm"
    />
  );
}

#
Related

Progress

Display feedback on status of task or length of a process.

Skeleton

Display placeholder content while data is loading.

#
Props

#
Spinner

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`alignItems` Set the element’s `align-items` CSS property `ResponsiveValue<typeof styling.align-items>` Default: `center`
`appearance` Control the appearance depending on whether the spinner is placed on a light/dark background. `"default" \| "inverse"` Default: `default`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`display` Set the element’s `display` CSS property `ResponsiveValue<typeof styling.display>` Default: `inline-flex`
`justifyContent` Set the element’s `justify-content` CSS property `ResponsiveValue<typeof styling.justify-content>` Default: `center`
`size` Set the element’s width and height. Only accepts predefined values: size tokens (xs, sm, md, etc.), numeric spacing values (16, 24, 32), fractional percentages (1/2, 1/3), or special keywords (auto, full, fit, max, min). ⚠️ COMMON MISTAKE: Do not use arbitrary pixel values like “200” or “300”. Use the closest valid token from the allowed values instead. 💡 TIP: When width and height are the same, use `size` instead of setting both `w` and `h` separately (e.g., prefer `size="24"` over `w="24" h="24"`). `ResponsiveValue<typeof theme.size>` Default: `md`

#
Changelog

#
0.1.0

Added component