Spinner

Import

import { Spinner } from '@heroui/react';

Usage

import {Spinner} from "@heroui/react";

export function SpinnerBasic() {
  return (
    <div className="flex items-center gap-4">
      <Spinner />
    </div>
  );
}

Colors

Current

Accent

Success

Warning

Danger

import {Spinner} from "@heroui/react";

export function SpinnerColors() {
  return (
    <div className="flex items-center gap-8">
      <div className="flex flex-col items-center gap-2">
        <Spinner color="current" />
        <span className="text-muted text-xs">Current</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner color="accent" />
        <span className="text-muted text-xs">Accent</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner color="success" />
        <span className="text-muted text-xs">Success</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner color="warning" />
        <span className="text-muted text-xs">Warning</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner color="danger" />
        <span className="text-muted text-xs">Danger</span>
      </div>
    </div>
  );
}

Sizes

Small

Medium

Large

Extra Large

import {Spinner} from "@heroui/react";

export function SpinnerSizes() {
  return (
    <div className="flex items-center gap-8">
      <div className="flex flex-col items-center gap-2">
        <Spinner size="sm" />
        <span className="text-muted text-xs">Small</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner size="md" />
        <span className="text-muted text-xs">Medium</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner size="lg" />
        <span className="text-muted text-xs">Large</span>
      </div>
      <div className="flex flex-col items-center gap-2">
        <Spinner size="xl" />
        <span className="text-muted text-xs">Extra Large</span>
      </div>
    </div>
  );
}

Styling

Passing Tailwind CSS classes

import {Spinner} from '@heroui/react';

function CustomSpinner() {
  return (
    <Spinner className="text-blue-500" />
  );
}

Customizing the component classes

To customize the Spinner component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .spinner {
    @apply animate-spin;
  }

  .spinner--accent {
    color: var(--accent);
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Spinner component uses these CSS classes (View source styles):

Base & Size Classes

.spinner - Base spinner styles with default size
.spinner--sm - Small size variant
.spinner--md - Medium size variant (default)
.spinner--lg - Large size variant
.spinner--xl - Extra large size variant

Color Classes

.spinner--current - Inherits current text color
.spinner--accent - Accent color variant
.spinner--danger - Danger color variant
.spinner--success - Success color variant
.spinner--warning - Warning color variant

API Reference

Spinner Props

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Size of the spinner
`color`	`"current" \| "accent" \| "success" \| "warning" \| "danger"`	`"current"`	Color variant of the spinner
`className`	`string`	-	Additional CSS classes

On this page