Spinner

@/components/kamod-ui/spinner

Installation

Import Spinner from `@/components/kamod-ui/spinner`.

pnpm add @kamod-ch/ui

Usage

Use Spinner for loading buttons, surfaces, and inline status updates with short descriptive copy.

import { Spinner } from "@/components/kamod-ui/spinner";

<Spinner />

Default

A compact circular spinner for lightweight loading states.

Sizes

Choose a size that matches surrounding typography and controls.

Tones

Adjust tone to blend with subtle UI or emphasize active work.

default

muted

primary

Buttons

Combine spinner and disabled button state for async actions.

Loading Surface

Use a modern status surface for longer network or processing work.

Deploy in progress

Packaging assets and publishing your latest release.

Loading Overlay

For blocking transitions, combine spinner with a subtle backdrop.

Dashboard preview

Refreshing data

API Reference

Props, slots and variants for this component.

Spinner

Spinner component props and accepted values.

Prop	Type	Default
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"sm"`
tone	`"default" \| "muted" \| "primary"`	`"default"`
aria-label	`string`	`"Loading"`
class	`string`	`undefined`

Accessibility Notes

Pair spinner visuals with meaningful status text, announce longer async updates in aria-live regions, and always provide recovery paths for stalled operations.