Status Button

A button that shows the progress of its action: idle, loading, success or error.

Dependencieslucide-reactmotion

Installation#

pnpm dlx shadcn@latest add @balick/status-button

Or pass the full URL: https://ui.balick.me/r/status-button.json

Usage#

"use client"

import * as React from "react"

import { StatusButton, type ButtonStatus } from "@/components/ui/status-button"

export function SaveButton() {
  const [status, setStatus] = React.useState<ButtonStatus>("idle")

  async function save() {
    setStatus("loading")
    try {
      await saveChanges()
      setStatus("success")
    } catch {
      setStatus("error")
    }
  }

  return (
    <StatusButton status={status} onClick={save}>
      Save changes
    </StatusButton>
  )
}

Props#

PropTypeDefault
status

Current state. The button is disabled while loading.

"idle" | "loading" | "success" | "error""idle"
loadingText

Label while loading.

ReactNode"Saving"
successText

Label after a success.

ReactNode"Saved"
errorText

Label after an error.

ReactNode"Try again"