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.
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
<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
| 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
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
- 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
primer-card-form
Parent container
Events guide
Submission events
