Feedback

Spinner

An indeterminate loading indicator. Inherits `currentColor`.

Server safeSource

Import

import { Spinner } from '@the_viveksingh/vivek-ui'

Sizes

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

With an accessible name

label is announced by assistive technology. Pass null when a nearby element already says what is loading, so it is not announced twice.

Loading your workspace
<Spinner label="Loading your workspace" />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Spinner
PropTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg'
labelstring | nullAnnounced to screen readers. Pass `null` for a purely decorative spinner sitting next to text that already says what is happening.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Spinner carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.