Spinner

Import

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

Usage

Colors

Sizes

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