Official Rocket Buttons

Approved variants

Primary: Rocket blue #167ac6, white mark and text without an outline. Dark: #172331, white mark and text. Light: white with #172331 mark and text, visible border. White text on the primary blue meets WCAG AA text contrast.

Integration

<script defer src="https://tryrocket.ai/buttons/v1/rocket-buttons.js"></script>
<rocket-button id="rocket-sign-in" action="continue" variant="primary"></rocket-button>
<rocket-button id="rocket-buy" action="buy" variant="primary"></rocket-button>

document.getElementById("rocket-sign-in")
  .addEventListener("rocket-activate", startExistingRocketSignIn);
document.getElementById("rocket-buy")
  .addEventListener("rocket-activate", startExistingRocketPurchase);
// While your existing handler is pending:
button.setAttribute("loading", "");
// On failure or completion:
button.removeAttribute("loading");

The kit is a framework-independent custom element, works with React, Vue and ordinary HTML, and makes no network requests for identity or payment. Its mark is embedded. It uses a native button inside Shadow DOM so host styles do not alter branding. Add https://tryrocket.ai to your script policy and allow the component's inline styles and data-image mask if your CSP restricts them. Do not weaken an existing CSP: review your policy or self-host the unmodified versioned file. Nothing else is loaded. Importing is safe only in the browser; load after client hydration for SSR apps.

Supported attributes: action="continue|buy", variant="primary|dark|light", boolean loading and disabled (remove them to reset; setting "false" still enables a boolean attribute). Listen for rocket-activate, not both that and click. Action and variant fall back to Continue with Rocket and primary when invalid. Set a Buy control disabled until your existing eligibility checks pass. Keep price, currency, recurrence and purchase terms beside the button.

Brand and accessibility rules

• Use exactly “Continue with Rocket” or “Buy with Rocket”. Do not rename, translate, replace, tint, crop or animate the Rocket mark or add icons. Labels and mark have no override API. Keep the component unmodified, including internal styles and accessibility labels.
• Keep the 48px minimum height, 16px mark, 8px mark/text gap, 20px horizontal padding and 10px corner radius. Allow at least 8px clear space around the control; do not shrink it or place overlays over it.
• Use one of the three approved variants. Do not use disabled styling merely as a decorative variant. Supply a visible reason for unavailable purchases or sign-in beside the button.
• Enter/Space use native button activation. Focus has a visible dual-color ring. Loading blocks duplicate activation, retains the fixed label and announces progress using a polite live region. Disabled is natively unavailable. A reduced-motion preference removes spinning and transitions; forced-colors uses system colors.
• Do not present a preview as an active offer or imply that branding establishes entitlement, security review or payment approval. The button changes presentation only; retain all OAuth state/nonce/PKCE checks and payment/entitlement authorization.