Skip to main content

Spinner button

SpinnerButton extends Button with a loading state that shows an inline Spinner and disables the button while work is in progress.

Example

<div className="d-flex flex-wrap gap-2">
  <SpinnerButton
    animation="border"
    loading
    theme="primary"
  />
  <SpinnerButton
    animation="grow"
    loading
    theme="primary"
    type="submit"
  >
    Submit
  </SpinnerButton>
</div>

Usage

<SpinnerButton theme="primary" animation="grow" loading={submitting} onClick={submit}>
Submit
</SpinnerButton>

All Button props pass through, and animation selects the spinner animation. When the button has no children while loading, a visually hidden "Loading..." label keeps it accessible.