> ## 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

<CardGroup cols={2}>
  <Card title="primer-card-form" icon="credit-card" href="/sdk/primer-checkout-web/components/primer-card-form/primer-card-form">
    Parent container
  </Card>

  <Card title="Events guide" icon="bolt" href="/checkout/primer-checkout/configuration/events">
    Submission events
  </Card>
</CardGroup>