Skip to main content

​
<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>
PropertiesbuttonText, variant, disabled
Emitsprimer:card-submit (internal)

​
Examples

​
Default

<primer-card-form>
  <primer-card-form-submit></primer-card-form-submit>
</primer-card-form>

​
Custom Text

<primer-card-form-submit buttonText="Complete Payment">
</primer-card-form-submit>

​
Secondary Variant

<primer-card-form-submit variant="secondary" buttonText="Pay Now">
</primer-card-form-submit>

​
Disabled

<primer-card-form-submit disabled></primer-card-form-submit>

​
Properties

PropertyAttributeTypeDefaultDescription
buttonTextbuttonTextstringLocalized “Pay”Button text
variantvariantstring"primary"Button style
disableddisabledbooleanfalseDisable button

​
Events

​
Emitted Events

EventWhenPayload
primer:card-submitButton clickedNone — 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

EventEmitted byHow 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

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

​
Alternative Submit Methods

MethodExample
HTML button<button type="submit">Pay</button>
Primer button<primer-button type="submit">Pay</primer-button>
data-submit<button data-submit>Pay</button>
Eventdocument.dispatchEvent(new CustomEvent('primer:card-submit', { bubbles: true, composed: true }))

​
CSS Properties

​
Typography

PropertyDescriptionDefault
--primer-typography-title-large-sizeButton text size16px
--primer-typography-title-large-weightButton text weight550

​
Colors (Primary Variant)

PropertyDescription
--primer-color-brandButton background color
--primer-color-gray-000Button text color (white)

​
Colors (Secondary Variant)

PropertyDescription
--primer-color-background-outlined-defaultDefault background
--primer-color-background-outlined-hoverHover background
--primer-color-border-outlined-defaultDefault border
--primer-color-text-primaryButton text color

​
Border & Shape

PropertyDescriptionDefault
--primer-radius-mediumButton border radius8px
--primer-space-mediumHorizontal padding12px

​
States

PropertyDescription
--primer-color-background-outlined-disabledDisabled background
--primer-color-text-disabledDisabled text
--primer-color-background-outlined-loadingLoading background

​
Animation

PropertyDescriptionDefault
--primer-animation-durationTransition duration200ms
--primer-animation-easingTransition easingcubic-bezier(0.44, 0, 0.4, 1)

​
States

StateDescriptionVisual Change
DefaultReady for clickBrand color background (primary) or outlined (secondary)
HoverMouse over buttonSlightly darker background
ActiveButton pressedFurther darkened background
FocusKeyboard focusedFocus ring visible
LoadingForm submittingSpinner displayed, text hidden
Disableddisabled attribute setMuted colors, no interaction

​
Content Guidelines

DoDon’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)