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

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

export function SpinnerColors() {
  return (
    <div className="flex items-center gap-8">

Sizes

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

export function SpinnerSizes() {
  return (
    <div className="flex items-center gap-8">

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