Better submit buttons

[naps62]

Targeting this issue from the main repo: ethui/ethui#1229

overall changes:

• the icon now switches between a spinner (during submission), a check (when a valid submission was made) and a floppy disk (when the form is dirty)
• the button still shows as disabled when the form is either not dirty or invalid
• labels for all 3 states are now required

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ethui-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 25, 2025 11:13am

[Copilot]

Pull Request Overview

This PR enhances the Form.Submit component to display different icons and labels based on submission state (submitting, success, dirty) and updates related stories.

• Add Save icon and new props (submittingLabel, successLabel) for dynamic labels
• Update Submit logic to compute icon and label based on isSubmitting, isDirty, and isSubmitSuccessful
• Provide new stories demonstrating the required and optional input forms with the updated submit behavior

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
stories/forms/Submit.stories.tsx	Add stories to showcase Form.Submit states and pass appropriate args
components/form.tsx	Update Submit component: import Save, add dynamic icon/label logic, define new props

Comments suppressed due to low confidence (3)

components/form.tsx:261

• [nitpick] The new props submittingLabel and successLabel are optional, but the PR description states labels for all states are required. To align the API with the documentation, consider making these props required.

}: SubmitProps) {

components/form.tsx:259

• [nitpick] Using the prop name isSubmitting for an override is confusing since formState.isSubmitting exists. Renaming the prop to e.g. isLoading or submittingOverride would improve clarity.

  isSubmitting: isSubmittingOverride = false,

components/form.tsx:268

• There are no existing tests covering the new Submit states (submitting, success, dirty). Consider adding tests to validate icon and label changes across these states.

  const disabled = skipDirtyCheck