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

# Card Form Submit Button

> Localized submit button for card payment forms.

## \<primer-card-form-submit>

Submit button for card forms with automatic localization and consistent styling. Wraps `<primer-button>` with card form integration.

## Quick Reference

| | |
| - | - |
| **Parent** | `<primer-card-form>` |
| **Properties** | `buttonText`, `variant`, `disabled` |
| **Emits** | `primer:card-submit` (internal) |

***

## Examples

### Default

```html theme={"dark"}
<primer-card-form>
  <primer-card-form-submit></primer-card-form-submit>
</primer-card-form>
```

### Custom Text

```html theme={"dark"}
<primer-card-form-submit buttonText="Complete Payment">
</primer-card-form-submit>
```

### Secondary Variant

```html theme={"dark"}
<primer-card-form-submit variant="secondary" buttonText="Pay Now">
</primer-card-form-submit>
```

### Disabled

```html theme={"dark"}
<primer-card-form-submit disabled></primer-card-form-submit>
```

***

## Properties

| Property | Attribute | Type | Default | Description |
| - | - | - | - | - |
| `buttonText` | `buttonText` | `string` | Localized "Pay" | Button text |
| `variant` | `variant` | `string` | `"primary"` | Button style |
| `disabled` | `disabled` | `boolean` | `false` | Disable button |

***

## Events

### Emitted Events

| Event | When | Payload |
| - | - | - |
| `primer:card-submit` | Button clicked | None — signals `<primer-card-form>` to validate and submit |

> **Note:** The event is dispatched with `bubbles: true` and `composed: true` so it crosses shadow DOM boundaries to reach `<primer-card-form>`.

### Relevant Parent Events

| Event | Emitted by | How it affects this button |
| - | - | - |
| `primer:state-change` | `<primer-checkout>` | When `isProcessing` is `true`, the button shows a loading spinner and becomes non-interactive |

### Dispatching the same event externally

```javascript theme={"dark"}
document.getElementById('my-button').addEventListener('click', () => {
  document.dispatchEvent(
    new CustomEvent('primer:card-submit', {
      bubbles: true,
      composed: true
    })
  );
});
```

***

## Alternative Submit Methods

| Method | Example |
| - | - |
| HTML button | `<button type="submit">Pay</button>` |
| Primer button | `<primer-button type="submit">Pay</primer-button>` |
| `data-submit` | `<button data-submit>Pay</button>` |
| Event | `document.dispatchEvent(new CustomEvent('primer:card-submit', { bubbles: true, composed: true }))` |

***

## CSS Properties

### Typography

| Property | Description | Default |
| - | - | - |
| `--primer-typography-title-large-size` | Button text size | `16px` |
| `--primer-typography-title-large-weight` | Button text weight | `550` |

### Colors (Primary Variant)

| Property | Description |
| - | - |
| `--primer-color-brand` | Button background color |
| `--primer-color-gray-000` | Button text color (white) |

### Colors (Secondary Variant)

| Property | Description |
| - | - |
| `--primer-color-background-outlined-default` | Default background |
| `--primer-color-background-outlined-hover` | Hover background |
| `--primer-color-border-outlined-default` | Default border |
| `--primer-color-text-primary` | Button text color |

### Border & Shape

| Property | Description | Default |
| - | - | - |
| `--primer-radius-medium` | Button border radius | `8px` |
| `--primer-space-medium` | Horizontal padding | `12px` |

### States

| Property | Description |
| - | - |
| `--primer-color-background-outlined-disabled` | Disabled background |
| `--primer-color-text-disabled` | Disabled text |
| `--primer-color-background-outlined-loading` | Loading background |

### Animation

| Property | Description | Default |
| - | - | - |
| `--primer-animation-duration` | Transition duration | `200ms` |
| `--primer-animation-easing` | Transition easing | `cubic-bezier(0.44, 0, 0.4, 1)` |

***

## States

| State | Description | Visual Change |
| - | - | - |
| **Default** | Ready for click | Brand color background (primary) or outlined (secondary) |
| **Hover** | Mouse over button | Slightly darker background |
| **Active** | Button pressed | Further darkened background |
| **Focus** | Keyboard focused | Focus ring visible |
| **Loading** | Form submitting | Spinner displayed, text hidden |
| **Disabled** | `disabled` attribute set | Muted colors, no interaction |

***

## Content Guidelines

| Do | Don't |
| - | - |
| "Pay now" | "Submit" |
| "Complete payment" | "Pay" |
| "Pay \$49.99" | "OK" |

***

## Usage Guidelines

### Do

* Use for consistent, localized submit buttons
* Place inside `<primer-card-form>`

### Don't

* Don't set `buttonText` to empty string (reverts to default)

***

## See also

> [card] [primer-card-form](https://primer.io/docs/sdk/primer-checkout-web/components/primer-card-form/primer-card-form.md)
>
> Parent container

> [card] [Events guide](https://primer.io/docs/checkout/primer-checkout/configuration/events.md)
>
> Submission events


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.