Spinner

​

Import

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

​

Usage

<Spinner size="md" aria-label="Loading results" />

​

Sizes

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

​

Custom Color

<Spinner size="md" color="#3b82f6" />
<Spinner size="md" color="var(--color-success)" />

​

In Buttons

import { Button, Spinner } from '@kivora/react';

function Example() {
  const [loading, setLoading] = useState(false);
  
  return (
    <Button disabled={loading}>
      {loading && <Spinner size="sm" />}
      {loading ? 'Saving...' : 'Save'}
    </Button>
  );
}

​

Centered Loading

<div className="flex items-center justify-center h-64">
  <Spinner size="lg" aria-label="Loading content" />
</div>

​

With Text

<div className="flex items-center gap-2">
  <Spinner size="sm" />
  <span>Loading data...</span>
</div>

​

Props

​

Accessibility

• Uses role="status" for screen reader announcements
• Includes default aria-label="Loading" which can be customized
• Ensure to provide descriptive labels when multiple spinners are present

​

Styling

• Uses CSS border animation for smooth rotation
• Inherits text color by default (can be overridden with color prop)
• Automatically applies appropriate border width for each size
• Includes animate-spin utility for continuous rotation

​

Best Practices

• Use sm size for inline elements like buttons
• Use md or lg for standalone loading indicators
• Always provide descriptive aria-label for context
• Consider showing fallback content for users who have reduced motion enabled