Submit Button

React 19

A button that automatically shows loading state when used with Server Actions. Leverages React 19's useFormStatus hook.

Auto Loading State

Automatically detects when form is submitting and shows loading spinner.

Server Actions Ready

Built for React 19 Server Actions. Works with Next.js form actions.

Custom Pending Text

Optionally show different text while form is submitting.

Installation

npx brutx@latest add submit-button

Note: This will also add the Button component if not already installed.

Usage

import { SubmitButton } from '@/components/ui/submit-button';

Demo

Click the button to see the loading state (simulated 2 second delay):

Examples

With Server Actions

// Server Action example (Next.js)
async function submitAction(formData: FormData) {
    'use server';
    // Handle form submission
    await saveToDatabase(formData);
}

// Client Component
export function ContactForm() {
    return (
        <form action={submitAction}>
            <Input name="email" placeholder="Email" />
            <SubmitButton>
                Send Message
            </SubmitButton>
        </form>
    );
}

Custom Pending Text

<SubmitButton pendingText="Submitting...">
    Submit Form
</SubmitButton>

All Variants

<SubmitButton variant="default">Default</SubmitButton>
<SubmitButton variant="secondary">Secondary</SubmitButton>
<SubmitButton variant="danger">Delete</SubmitButton>
<SubmitButton variant="outline">Outline</SubmitButton>

Props

PropTypeDefaultDescription
pendingTextstring-Text to show while form is submitting
...propsButtonProps-All Button props are supported

Requirements

  • React 19+ - Uses useFormStatus hook
  • Must be inside a form - The button must be a descendant of a <form> element
  • Client Component - Must be used in a client component ('use client')