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 |