Display

Spinner

Lucide's Loader2, spinning, with role="status" and a Loading label.

packages/design-system/components/ui/spinner.tsx

Examples

Default, 16px
Sized with size-*
In a button

Anatomy

  1. 01Loader2 icon, animate-spin

Usage

import { Spinner } from "@repo/design-system/components/ui/spinner";

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

Props

PropTypeDefaultDescription
...propsComponentProps<"svg">noneAny SVG attribute. Override aria-label to say what is loading.
classNamestringnoneMerged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Do

  • Disable the control it sits in.

Don't

  • Use it for a page load. Use skeletons.