Spinner

---
import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"
---

<div class="flex flex-col items-center gap-6">
  <Spinner />
  <Button size="sm" variant="outline" disabled>
    <Spinner class="mr-2 size-4" />
    Loading...
  </Button>
</div>

Installation

npx shadcn@latest add @fulldev/spinner

Usage

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

<Spinner />

Notes

• Spinner works well as a standalone loading indicator or inline inside a Button.
• When it is purely decorative next to visible loading text, the button text can carry the main status message.

Example

<div class="flex items-center gap-2 text-sm">
  <Spinner />
  <span>Loading results...</span>
</div>

API Reference

See the GitHub source code for more information on props.