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).

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: