104Get started
HextaUI

Spinner: Inline

Next to text, mark the spinner aria-hidden so the words do the talking. On its own, it announces its label.

Saving changes…

Deploying

Spinners use the text color around them.

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

export function SpinnerInline() {
  return (
    <div className="flex flex-col items-start gap-4 text-sm">
      <p className="flex items-center gap-2 text-muted-foreground">
        <Spinner size="sm" aria-hidden />
        Saving changes…
      </p>
      <Badge>
        <Spinner variant="ring" aria-hidden />
        Deploying
      </Badge>
      <p className="flex items-center gap-2 text-primary">
        <Spinner size="sm" label="Syncing" />
        Spinners use the text color around them.
      </p>
    </div>
  )
}

Add this example

This adds the example as components/examples/spinner/inline.tsx, together with the Spinner component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/spinner-inline.json

To add only the component, follow the Spinner installation.

Props in this example

The Spinner props this example sets, from the API reference.

Spinner

PropTypeDefault
variant
"ticks" | "ring""ticks"
sizenull leaves sizing to the parent.
"sm" | "default" | "lg" | "xl" | null"default"
label
string"Loading"

Every prop is in the Spinner API reference.

More Spinner examples

See them all, with keyboard support and accessibility notes, on the Spinner page.

Related components