Submit

A primary button of type="submit". Its label comes from settings.submitLabel (default "Submit"); while the form validates or posts it is disabled, shows a spinner and sets aria-busy.

#Preview

#Usage

// settings: { submitLabel: 'Join the waitlist' }
import { Form, Field, Submit } from '@trymirio/mirio';

<Form schema={waitlist} client={mirio}>
  <Field name="email" />
  <Submit />                       {/* label from settings.submitLabel, default "Submit" */}
</Form>

<Submit fullWidth={false}>Count me in</Submit>   {/* children override the label */}

#Props

Prop	Type	Default	Description
children	ReactNode	settings.submitLabel ?? "Submit"	The label.
fullWidth	boolean	true	Stretch to the form width (w-full); false renders w-auto. MultiStep passes false so Submit sits next to Back.
disabled	boolean	false	Also disabled automatically while submitting.
variant	'primary' | 'secondary'	'primary'	From Button.
className	string	button classes + w-full/w-auto	Merged onto the <button>.
…Button props			Everything from Button except type and children.

Renders <button type="submit" data-mirio="submit" data-variant="primary" [aria-busy="true"]> with [data-mirio="spinner"] while busy. The same Button component (data-mirio="button") is exported for Back/Next and your own buttons.

#Variants and states

• Idle: --mirio-primary background, --mirio-primary-fg text.
• Submitting: spinner, disabled, aria-busy="true", 60 % opacity.
• Inside MultiStep: shown only on the last visible page, with fullWidth={false} and min-w-28.

#Customization

• Tokens: --mirio-primary, --mirio-primary-fg, --mirio-ring (focus ring), --mirio-bg (ring offset), --mirio-radius.
• fullWidth={false} undoes the full width; className="bg-emerald-600 hover:bg-emerald-700" replaces the primary background because tailwind-merge resolves the conflict.
• CSS hooks: [data-mirio="submit"], [data-mirio="submit"][aria-busy="true"], [data-mirio="button"][data-variant="secondary"].

#Accessibility

A native submit button: Enter and Space activate it, Enter inside an input submits through it. aria-busy announces the in-flight state; disabled prevents double submits (the hook also ignores repeat submits).

#Related

Form, MultiStep, Success