Page updated Mar 26, 2024

Customize action buttons (Submit, Cancel, Clear, Reset)

Amplify Studio generated forms come with three action buttons: Submit, Cancel, and Clear or Reset, depending on whether the form creates or updates a record.

Change button positions

You can choose to show the action buttons on the bottom (default), top, or top and bottom of the form.

  1. From Amplify Studio: Select the action buttons
  2. Go to Display > Position
  3. Select Bottom, Top, or Top & bottom

Customize label for Submit, Cancel, Clear, and Reset buttons

You can customize action button labels to better describe your form's use case, such as changing Submit to Create note.

  1. From Amplify Studio: Select the action buttons
  2. Go to Display > Submit button label
  3. Enter your custom button label

Toggle visibility for Submit, Cancel, Clear, and Reset buttons

You can customize the visibility of action buttons to better accommodate your form's use case. For example, if you show the form in a modal with an X as a close button, you can hide the redundant Cancel action button.

  1. From Amplify Studio: Select the action buttons
  2. Go to Display > Submit button is visible
  3. Enter your custom button label

If you hide all form action buttons, you can still leverage the onChange event handler to self-manage the form lifecycle. This is useful for a form that updates data in real-time without explicit user confirmation.