Spinner

Used for indicating an unspecified wait time.

#
Documentation

#
Usage

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

#
Size

Use the size prop to select between the different sizes.

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

#
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

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
appearance "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

#
Changelog

#
0.1.0

Added component

Skeleton Switch