Spinner

An indeterminate loading indicator, inline with text or inside a button.

Syncing

Usage

import { Spinner } from "@zynactra/ui/spinner"

<Button disabled>
  <Spinner data-icon="inline-start" />
  Deploying
</Button>

Size it with size-* and color it with text color. It has role="status" and an aria-label of "Loading"; pass your own label for context.

Change the label too ("Deploy" becomes "Deploying"), so the state isn't carried by motion alone.
For content with a known shape, use Skeleton. For known progress, use Progress.
One spinner per region. A page full of spinners means the loading strategy needs work.

Sonner

Stacked toast notifications from Sonner, styled by the theme.

Switch

Turn a setting on or off immediately. Square track, square thumb.