export const meta = {
  title: 'Customize action buttons (Submit, Cancel, Clear, Reset)',
  description:
    '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.'
};

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](/console/adminui/start/#logging-in-and-creating-an-app): Select the action buttons
2. Go to **Display** > **Position**
3. Select **Bottom**, **Top**, or **Top & bottom**

<video autoPlay={true} muted={true} loop={true} width="100%">
  <source src="/images/console/formbuilder/call-to-action-position.mp4" />
</video>

## 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](/console/adminui/start/#logging-in-and-creating-an-app): Select the action buttons
2. Go to **Display** > **Submit button label**
3. Enter your custom button label

<video autoPlay={true} muted={true} loop={true} width="100%">
  <source src="/images/console/formbuilder/call-to-action-label.mp4" />
</video>

## 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](/console/adminui/start/#logging-in-and-creating-an-app): Select the action buttons
2. Go to **Display** > **Submit button is visible**
3. Enter your custom button label

<video autoPlay={true} muted={true} loop={true} width="100%">
  <source src="/images/console/formbuilder/call-to-action-visibility.mp4" />
</video>

If you hide all form action buttons, you can still leverage the [`onChange` event handler](/console/formbuilder/lifecycle/#get-form-data-as-your-user-inputs-data---onchange) to self-manage the form lifecycle. This is useful for a form that updates data in real-time without explicit user confirmation.