Submit

Basic Usage

The Submit field renders a submit button. Pass the button label to make().

Submit::make('Save Entry');

Without a label, it defaults to "Submit":

Submit::make();

Label

Change the label after creation:

Submit::make()->label('Save Changes');

Variants

Six visual variants are available:

Variant	Description
primary	Solid blue button (default)
secondary	Muted/gray button
danger	Red button for destructive actions
outline	Bordered, transparent background
ghost	No border, minimal styling
link	Looks like a text link

Example

Submit::make('Save')->primary();
Submit::make('Cancel')->secondary();
Submit::make('Delete')->danger();
Submit::make('Save Draft')->outline();
Submit::make('Skip')->ghost();
Submit::make('Learn More')->link();

Or use the generic method:

Submit::make('Save')->variant('primary');

Size

Three size helpers are available: sm, md (default), and lg.

Example

Submit::make('Save')->sm();
Submit::make('Save')->md();
Submit::make('Save')->lg();

Or use the generic method, which also accepts xs and xl:

Submit::make('Save')->size('lg');
Submit::make('Save')->size('xs');

Full Width

Make the button span the full width of its container:

Example

Submit::make('Create Account')->fullWidth();

Icons

Add an icon to the button by passing a resolver-backed icon name. See Icons:

Example

Submit::make('Save')->icon('SaveIcon');
Submit::make('Next')->icon('ArrowRightIcon')->iconPosition('right')->outline();
Submit::make('Delete')->icon('Trash2Icon')->danger();

Icon Position

By default, the icon appears on the left. Place it on the right:

Submit::make('Next')
    ->icon('ArrowRightIcon')
    ->iconPosition('right');

Loading Icon

Show a different icon while the form is submitting:

Submit::make('Save')
    ->icon('SaveIcon')
    ->loadingIcon('LoaderCircleIcon');

Loading Label

Change the button text while the form is submitting:

Submit::make('Save')->loadingLabel('Saving...');
Submit::make('Save Entry')->loadingLabel('Saving...');

Multiple Submit Actions

Use name() and value() when a form has more than one submit action and your controller needs to know which button was clicked. Give related actions the same name and distinct values:

Submit::make('Save Draft')
    ->name('intent')
    ->value('draft')
    ->secondary();

Submit::make('Publish')
    ->name('intent')
    ->value('publish')
    ->loadingLabel('Publishing...');

The rendered button uses native name and value attributes. On generated <Form> submit, Inertia Forms reads the clicked submitter and adds only that button's name/value pair to the request data. Disabled buttons and buttons without a name do not add submitter data. As with native HTML forms, the submitted value is read from the rendered button element.

$validated = $request->validate([
    'title' => ['required', 'string'],
    'intent' => ['nullable', 'in:draft,publish'],
]);

if ($validated['intent'] === 'publish') {
    // Publish the model...
}

Manual form wrappers should pass the submit event's submitter to form.submit(...) when clicked button data matters. See Manual Usage.

Disabled

Disable the button to prevent submission:

Submit::make('Save')->disabled();

Shared Field APIs

The submit methods above compose with shared field APIs. You may use Validation for named submitter rules, Styling for class(), controlClass(), and wrapperClass(), Conditional Visibility, and Authorization.

Submit is excluded from initial form data. Its name() and value() pair is submitted only for the activated button. Only class(), controlClass(), and wrapperClass() render for Submit, since the button does not use FieldWrapper.

Combining Options

Submit::make('Save Entry')
    ->primary()
    ->lg()
    ->fullWidth()
    ->icon('SaveIcon')
    ->loadingLabel('Saving...')
    ->loadingIcon('LoaderCircleIcon');

Using the Component Directly

SubmitButton is exported from each package's components subpath. You may use it for standalone actions or while rendering forms manually. For icons, pass an icon resolver.

Vue

<script setup lang="ts">
import type { IconResolverFn } from '@inertiaui/form-vue'
import { SubmitButton } from '@inertiaui/form-vue/components'
import { LoaderCircle, Save } from '@lucide/vue'

const icons = {
    SaveIcon: Save,
    LoaderCircleIcon: LoaderCircle,
}

const iconResolver: IconResolverFn = (icon) => icons[icon as keyof typeof icons] ?? null
const isReady = true
const trackSave = () => {}
</script>

<template>
    <SubmitButton
        id="save-entry"
        type="submit"
        name="intent"
        value="save"
        label="Save Entry"
        loading-label="Saving..."
        icon="SaveIcon"
        loading-icon="LoaderCircleIcon"
        :icon-resolver="iconResolver"
        variant="primary"
        size="lg"
        :full-width="true"
        icon-position="left"
        :disabled="!isReady"
        class="shadow-none"
        control-class="tracking-normal"
        wrapper-class="flex justify-end"
        data-testid="save-entry"
        @click="trackSave"
    />
</template>

React

import type { IconResolverFn } from '@inertiaui/form-react'
import { SubmitButton } from '@inertiaui/form-react/components'
import { LoaderCircle, Save } from 'lucide-react'

const icons = {
    SaveIcon: Save,
    LoaderCircleIcon: LoaderCircle,
}

const iconResolver: IconResolverFn = (icon) => icons[icon as keyof typeof icons] ?? null

export default function CreateButton() {
    const isReady = true
    const trackSave = () => {}

    return (
        <SubmitButton
            id="save-entry"
            type="submit"
            name="intent"
            value="save"
            label="Save Entry"
            loadingLabel="Saving..."
            icon="SaveIcon"
            loadingIcon="LoaderCircleIcon"
            iconResolver={iconResolver}
            variant="primary"
            size="lg"
            fullWidth
            iconPosition="left"
            disabled={!isReady}
            class="shadow-none"
            controlClass="tracking-normal"
            wrapperClass="flex justify-end"
            data-testid="save-entry"
            onClick={trackSave}
        />
    )
}

Native attributes and listeners target the underlying native element. See Native Attributes And Events.