Prism UI

The Action Button component provides a seamless way to handle loading states in forms and async operations. Perfect for form submissions, data fetching, and any action that requires user feedback.

Installation

Examples

Default

Secondary

Destructive

Outline

Ghost

Link

Usage

Basic Usage

import { ActionButton } from "@/components/prismui/action-button"
import { useState } from "react"
 
export default function Example() {
  const [isPending, setIsPending] = useState(false)
 
  async function handleSubmit() {
    setIsPending(true)
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 1500))
    setIsPending(false)
  }
 
  return (
    <ActionButton onClick={handleSubmit} isPending={isPending}>
      Submit Form
    </ActionButton>
  )
}

Form Integration

import { ActionButton } from "@/components/prismui/action-button"
import { useFormStatus } from "react-dom"
 
export default function SubmitButton() {
  const { pending } = useFormStatus()
 
  return (
    <ActionButton isPending={pending} type="submit">
      Save Changes
    </ActionButton>
  )
}

Customization

Custom Loading Indicator

<ActionButton
  isPending={isPending}
  className="[--spinner-size:1.5rem]"
>
  Process
</ActionButton>

Custom Variants

<ActionButton
  variant="destructive"
  size="lg"
  className="font-bold"
  isPending={isPending}
>
  Delete Account
</ActionButton>

With Icon

<ActionButton isPending={isPending}>
  <Save className="mr-2 h-4 w-4" />
  Save Changes
</ActionButton>

Notes

Built on top of the base Button component
Uses Lucide React for loading spinner
TypeScript support with proper types
Maintains width during loading state
Prevents accidental double submissions
Supports all button variants and sizes
Integrates with Shadcn UI components
Optimized for form submissions

Features

Smooth loading state transitions
Consistent button width
Prevents form resubmission
Multiple button variants
Responsive sizing options
Accessible loading states
Form integration support
Server actions compatibility

Props

Prop	Type	Description
isPending	boolean	Whether the button is in a loading state
onClick	() => void	Optional click handler that prevents default form submission
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	The visual variant of the button
size	"default" \| "sm" \| "lg" \| "icon"	The size of the button
children	React.ReactNode	The content to display inside the button

Action Button