---
title: Submit
description: The submit button, labelled from settings.submitLabel, with a loading state.
preview: submit
---
# 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
<!-- preview: submit -->

## Usage
```tsx
// 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](/docs/components/form.md), [MultiStep](/docs/components/multi-step.md), [Success](/docs/components/success.md)