Buttons & Actions

Submit

Renders a submit button. Add it as the last field in your fields() array.

use TranquilTools\FormBuilder\Fields\Submit;

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

The name argument to make() is optional for submit buttons. The default label is Save (translatable via vue-form-builder::buttons.save).

Icon or markup on a button

Pass an HtmlString as label to put an icon or other markup on any button. Give icon-only buttons an ariaLabel() so screen readers can name them:

use Illuminate\Support\HtmlString;

Submit::make()
    ->label(new HtmlString('<svg ...></svg>'))
    ->ariaLabel('Add')

The markup is rendered as-is, so only pass HTML you control. A plain string label is always shown as text. The schema keeps the text of the HTML in label (or the default label when there is none), which is also what the confirm dialog shows.

Confirm before submit

Submit::make()
    ->confirmTitle('Save changes?')
    ->confirmMessage('This will update the record with the current values.')

Button

A generic button. Use for custom in-form actions that do not submit the form.

use TranquilTools\FormBuilder\Fields\Button;

Button::make('reset')
    ->label('Reset form')

Variants

Control the button style using variant():

Button::make('archive')
    ->label('Archive')
    ->variant('secondary')

Available variants: default, destructive, outline, secondary, ghost, link.

Confirm dialog

Any button can show a confirmation dialog before executing its action:

Button::make('archive')
    ->label('Archive project')
    ->confirmTitle('Archive this project?')
    ->confirmMessage('The project will be moved to the archive.')
    ->cancelLabel('Keep active')

Delete action

Combine the confirm dialog with a delete URL to send a DELETE request via Inertia:

Button::make()
    ->label('Remove item')
    ->variant('destructive')
    ->deleteUrl(route('items.destroy', $item))
    ->confirmTitle('Remove this item?')
    ->confirmMessage('This action cannot be undone.')

DeleteButton

A delete button with built-in confirmation dialog. On confirmation, it sends a DELETE request to the given URL via Inertia.

use TranquilTools\FormBuilder\Fields\DeleteButton;

DeleteButton::make()
    ->label('Delete product')
    ->deleteUrl(route('products.destroy', $product))

Customizing the confirmation dialog

DeleteButton::make()
    ->label('Delete account')
    ->deleteUrl(route('account.destroy'))
    ->confirmTitle('Are you sure?')
    ->confirmMessage('This will permanently delete your account and all associated data.')
    ->cancelLabel('Keep my account')

Shared methods

All button types (Button, Submit, DeleteButton) support these methods:

Translations

Default button labels are translatable. Publish the language files or add entries to your lang/vendor/vue-form-builder/ directory: