Cta
v1.0.21Updated 19 Oct 2026Call-to-action section that converts — bold headline plus prominent buttons. Copy-paste block; baked-in demo content (edit the JSX to customise).
Preview
Live · 14 stories▸Why this is recommendedctacall-to-actionconversionmarketing+3
Cta centred on the page — simple.
- ✓Landing pages
- ✓End-of-page conversion blocks
- ✓Marketing pages
- Centered, gradient-panel, split-with-image, with-stats and inline-newsletter layouts
- Primary + secondary action slots
- Every action renders NOTHING until it is wired: primaryHref / onPrimaryClick and secondaryHref / onSecondaryClick. All 20 buttons in this file used to be inert (condo69 fb_bc8045e2 / fb_f8fba1de)
- A destination makes the action an anchor through linkComponent; a handler alone makes it a real type=button (fb_bf7dc63a)
- CtaNewsletterInline really submits and hands the typed address to onSubscribe - Button defaults to type=button, so it used to submit nothing at all
- The aria-hidden illustration art (proofPeople, orderLines) and the proof figures (stats) are props that keep their current defaults
- ✕In-app dashboards
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
classNameOptional wrapper class override
—labelsOverride every built-in display string across the CTA family (eyebrows, headlines, subcopy, button text, badges, form chrome, aria-labels) for i18n or white-labelling. Merged over DEFAULT_CTA_LABELS.
—primaryHrefWhere this block primary action goes. Without it (and without onPrimaryClick) NO primary action renders - every button in this file used to be inert. MCP feedback fb_bc8045e2 / fb_f8fba1de.
—onPrimaryClickWhat the primary action does. Safe to combine with primaryHref (it fires before navigation); on its own it makes the action a real type=button. Receives the click event so a routed host can preventDefault and route itself.
—secondaryHrefWhere the secondary action goes (Contact sales, Book a demo, Compare plans). Same contract as primaryHref. CtaWithStats has no secondary action.
—onSecondaryClickWhat the secondary action does. See onPrimaryClick.
—onSubscribeCtaNewsletterInline only: receives the address the visitor typed on submit. Until 1.0.14 the submit button was type=button, so the form was never submitted at all.
—proofPeopleThe CtaWithAvatars social-proof faces (avatar seeds). Illustration art, so it keeps its current default; pass your own, or [] to drop the row.
—orderLinesThe till lines inside the CtaWithAppMockup aria-hidden phone. Decoration, so it keeps its current default and is configurable all the same.
—statsThe CtaWithStats three figures, captioned from labels. Keeps the built-in demo figures by default; a caller with real numbers supplies each caption with its own number.
—linkComponentThe host app link component for any action that has a destination. Defaults to a plain anchor, which in a routed app reloads the whole document (fb_bf7dc63a).
—