> ## Documentation Index
> Fetch the complete documentation index at: https://docs.overflow.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Submit button

> A styled button that relays clicks to your submission logic.

The `submitButton` element is a pure relay. It has no value, no validation, and no internal state. Fires `onReady` once on mount and `onSubmit` (with `value: undefined`) on every click.

Use it to:

* Compose the submit slot inside a Checkout element that mounts custom sub-elements.
* Drive an external `card.submit()` / `bank.submit()` call while keeping the button's chrome themed with the rest of the SDK.

## Factory

```typescript theme={null}
overflow.submitButton(options?: SubmitButtonElementOptions): SubmitButtonElement
```

## Example

```javascript theme={null}
const card = overflow.card();
const submit = overflow.submitButton({ label: 'Pay' });

card.mount('#card');

submit
  .on('onSubmit', () => card.submit())
  .mount('#submit');

card.on('onSubmit', async ({ value }) => {
  await fetch('/your-backend/authorize', {
    method: 'POST',
    body: JSON.stringify({ paymentMethod: value }),
  });
});
```

## Options

| Key                         | Type         | Default                 | Notes                                                                                                        |
| --------------------------- | ------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------ |
| `label`                     | `string`     | `'Submit'`              | Button text.                                                                                                 |
| `disabled`                  | `boolean`    | `false`                 | Renders the button disabled and suppresses `onSubmit` on click.                                              |
| `appearance`                | `Appearance` | inherits instance theme | Element-scoped override. See [Element-scoped overrides](/payment-elements/theming/element-scoped-overrides). |
| `id`, `ariaLabel`, `locale` | shared       |                         |                                                                                                              |

`submitButton` does not accept `required`, `validate`, or `validateAsync`. It has no value to validate.

## Events

| Event      | Fires                                   | Payload                                             |
| ---------- | --------------------------------------- | --------------------------------------------------- |
| `onReady`  | Once, when the button has mounted.      | `{ elementType: 'submitButton' }`                   |
| `onSubmit` | On every click while `disabled: false`. | `{ elementType: 'submitButton', value: undefined }` |

Focus and blur are wired to the underlying `<button>` and fire normally. `onEscapeKeyPressed` is not emitted (there is no shopper-dismissable input).

## Value

```typescript theme={null}
type SubmitButtonValue = undefined;
```

The `onSubmit` payload's `value` is always `undefined`. Read data from other elements' `.value` getters or `onChange` snapshots inside your `onSubmit` handler.

## Updating at runtime

```javascript theme={null}
submit.update({ disabled: true });
submit.update({ label: 'Processing…' });
```

Use `update()` to toggle `disabled` based on other elements' `complete` state:

```javascript theme={null}
let cardOk = false;
let emailOk = false;
const sync = () => submit.update({ disabled: !(cardOk && emailOk) });

card.on('onChange', ({ complete }) => { cardOk = complete; sync(); });
email.on('onChange', ({ complete }) => { emailOk = complete; sync(); });
```

## Inside Checkout

Checkout renders its own submit control. Use standalone `submitButton` when composing elements outside Checkout, or when you need a themed button for a fully custom layout.

## See also

* [Compose standalone elements](/payment-elements/guides/compose-standalone-elements)
* [Elements overview](/payment-elements/elements/overview)