CTA Band
block / marketing
Closing call-to-action band with a link action or an email capture form that owns its pending, success and failure states.
- type
- block
- files
- 1
- registry deps
- button, input, label, @automindz/backdrop, @automindz/render-link
- npm deps
- lucide-react
installs
- components/automindz/cta-band.tsx
- Input and submit are one control, one focus ring.
- Success swaps in place; the band's height holds.
- No onSubmitEmail and it refuses to render a form.
Wire onSubmitEmail: an async function that subscribes the address. The band owns every state around that promise — pending, success swapped into the form's own grid cell so the height holds, failure with a retry that reuses the typed value, invalid tied to the field. Without it the email variant renders no form and says so. There the field and submit are one control on bg-background, which is what keeps errors legible on tone="contrast". pattern draws @automindz/backdrop behind it.
Variations
one state per section
- 01Email on contrast, patterned
- 02Email, idle and invalid
- 03Email, failure and retry
- 04Inline on contrast
- 05Inline, title only
- 06Split, 1.35:1
- 07Email, not wired
Email on contrast, patterned
The loudest thing the item does, and it is pressable: submit it and watch the field lock, then the confirmation land. The title runs to 3.75rem, the field and submit are one shell on bg-background, and the hatch behind it is @automindz/backdrop drawn in primary-foreground at strong.
Registry notes, once a month
What landed in the registry, what we changed our minds about, and the states we found missing in our own client apps.
Email, idle and invalid
A visually hidden label, type=email with inputMode=email, and the note tied to the field. Submit it empty, or as 'sam@': the constraint is the native one read back through checkValidity, the shell's ring turns destructive, the message is tied to the field and focus returns to it.
Registry notes, once a month
What landed in the registry, what we changed our minds about, and the states we found missing in our own client apps.
Email, failure and retry
The first submit rejects with the service's own message; the retry uses the address still in the field and succeeds. Nothing is retyped, no toast is involved, and the message stays on bg-background because a destructive red on the band would not be readable.
Registry notes, once a month
What landed in the registry, what we changed our minds about, and the states we found missing in our own client apps.
Inline on contrast
bg-primary with text-primary-foreground — a pair the consumer's theme already guarantees in both schemes. The edge is an inset ring rather than a border, so className='rounded-none' is all a full-bleed band needs.
Ready when your next cycle is
Start on one ward, extend when the coverage floor holds.
No card. Two weeks.
Inline, title only
The lede left out, which is the case worth designing for: nothing collapses and no gap is left standing in for the paragraph. A patterned muted band, where the small print steps up to 90% foreground because muted-foreground over a pattern falls under 4.5:1.
Point your next client app at the registry
One line in components.json. One command per item.
Split, 1.35:1
The third layout: copy against the action either side of a hairline that turns horizontal below md, so the rule always separates rather than floats. The columns are deliberately unequal — the copy is why the reader is here.
Need an item the registry does not have yet
Blocks are built once, in here, by the team that maintains them — not forked into a client repo and left there.
Typical turnaround: one sprint.
Email, not wired
No onSubmitEmail, so there is no form to submit into. It fails closed with a message aimed at whoever installed it instead of collecting an address it cannot send.
Registry notes, once a month
What landed in the registry, what we changed our minds about, and the states we found missing in our own client apps.
Email capture is not wired. Pass onSubmitEmail to CtaBand, or use variant="inline" with an action.