# Spinner: In buttons

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

Example: https://hextaui.com/docs/spinner/examples/button
Component docs: https://hextaui.com/docs/spinner.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/spinner-button.json
```

This adds `components/examples/spinner/button.tsx` with the Spinner component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/spinner/button.tsx"
"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>
  )
}
```

## More Spinner examples

- [Without flicker](https://hextaui.com/docs/spinner/examples/delayed.md)
- [Sizes](https://hextaui.com/docs/spinner/examples/sizes.md)
- [Inline](https://hextaui.com/docs/spinner/examples/inline.md)