Spinner

since 1.2

Spinner is an animated loading indicator that shows ongoing processing or data fetching.

Example

Loading results…

"use client"

import { Button } from "@strongtie/design-system/button"
import { Spinner } from "@strongtie/design-system/spinner"

export function SpinnerDefault() {
  return (
    <div className="flex flex-col items-start gap-6">
      <div className="flex items-center gap-6">
        <Spinner className="size-4" />
        <Spinner className="size-6" />
        <Spinner className="size-8" />
      </div>

      <div className="text-muted-foreground flex items-center gap-2 text-sm">
        <Spinner />
        Loading results…
      </div>

      <Button disabled>
        <Spinner />
        Saving
      </Button>
    </div>
  )
}

Install

import { Spinner } from "@strongtie/design-system/spinner"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Props

All components accept standard HTML attributes and React props.

Sonner Switch

On This Page

Example Install Props