Card Form Submit Button

​

<primer-card-form-submit>

​

Quick Reference

​

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

​

Events

​

Emitted Events

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

​

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

​

CSS Properties

​

Typography

​

Colors (Primary Variant)

​

Colors (Secondary Variant)

​

Border & Shape

​

States

​

Animation

​

States

​

Content Guidelines

​

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