104Get started
HextaUI

Spinner: In buttons

Button and Command use this spinner for their loading states, sized to the button's icons.

"use client"

import { IconRefresh } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"

function save() {
  return new Promise((resolve) => setTimeout(resolve, 1600))
}

export function SpinnerButton() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button feedback loadingLabel="Saving…" onClick={save}>
        Save changes
      </Button>
      <Button
        variant="outline"
        size="icon"
        aria-label="Refresh"
        feedback
        onClick={save}
      >
        <IconRefresh />
      </Button>
    </div>
  )
}

Add this example

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

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

To add only the component, follow the Spinner installation.

More Spinner examples

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

Related components