shuip

Submit Button

Specifically designed for form submission with built-in loading states, making it perfect for forms that need to show submission progress and prevent double submissions.

Installation

npx shadcn@latest add https://shuip.xyz/r/submit-button.json

Preview

Built-in features

  • Automatic loading state: Shows spinner icon when loading prop is true
  • Full-width by default: Optimized for form layouts
  • Customizable icon: Can override the default loading spinner
  • Form integration: Native type="submit" behavior

Common use cases

// Basic form submission
<SubmitButton children="Save Changes" loading={isSaving} />


<SubmitButton loading={isSaving}>
<span className="flex items-center">
  <Send className="mr-2 h-4 w-4" />
  Send Message
</span>
</SubmitButton>


// With custom icon
<SubmitButton 
    children="Processing Payment"
    loading={isProcessing}
    icon={<CreditCard className="mr-2 h-4 w-4 animate-pulse" />}
/>


// With JSX label
<SubmitButton 
    children={
      <span className="flex items-center">
        <Send className="mr-2 h-4 w-4" />
        Send Message
      </span>
    }
    loading={isSending}
/>


// Custom styling
<SubmitButton 
    children="Delete Account"
    loading={isDeleting}
    className="bg-destructive hover:bg-destructive/90"
    disabled={!confirmed}
/>

Examples

Default

Loading

Props

NameTypeDescription
childrenReact.ReactNode | stringLabel displayed above the field
disabled?booleanDisabled state of the button
loading?booleanLoading state of the button
iconReact.JSX.Element?Icon displayed in the button