Newsletter Signup

When to use

Reach for NewsletterSignup for an email-capture CTA in a sidebar, footer, or hero — anywhere you want a brand-tinted block that asks visitors to subscribe. Two variants: inline-form (input + button) or cta-only (button-only, click leads elsewhere).

Minimal example

import { NewsletterSignup } from "@/components/newsletter-signup";

<NewsletterSignup
  onSubmit={async (email) => {
    await api.subscribe(email);
  }}
/>;

Returning a Promise from onSubmit auto-tracks the status: idle → pending → success on resolve, or idle → pending → error on reject. The card disables the input + button during pending and shows the appropriate status message.

CTA-only variant

<NewsletterSignup
  variant="cta-only"
  labels={{ button: "Sign up" }}
  onSubmit={() => openSignupModal()}
/>;

No email is captured here — the click handler typically opens a modal, navigates to a sign-up page, or triggers another flow.

Localization

<NewsletterSignup
  labels={{
    title: "Bültenimize Katılın",
    body: "En güncel haberleri e-posta ile alın.",
    placeholder: "E-posta adresiniz",
    button: "Abone Ol",
    successMessage: "Teşekkürler! Aboneliğiniz tamamlandı.",
    errorMessage: "Bir şeyler ters gitti. Lütfen tekrar deneyin.",
  }}
  onSubmit={subscribeAction}
/>;

Three tones

• primary (default) — lime tint frame, signals the most editorial / brand-forward CTA.
• accent — accent-tone frame, useful when primary is already used elsewhere on the page.
• muted — neutral frame, good for low-noise placements like docs footers.

Controlled email value

const [email, setEmail] = useState("");

<NewsletterSignup
  value={email}
  onChange={setEmail}
  onSubmit={async (currentEmail) => {
    await api.subscribe(currentEmail);
  }}
/>;

Controlled status

If your form needs status from outside (e.g. a global success banner elsewhere on the page), drive the status prop:

<NewsletterSignup
  status={mutation.status === "loading" ? "pending" : mutation.status === "success" ? "success" : mutation.status === "error" ? "error" : "idle"}
  onSubmit={(email) => mutation.mutate(email)}
/>;

Accessibility

• The form wraps input + button so Enter submits.
• Input has aria-label from labels.emailLabel; default is Email address.
• Status region uses aria-live="polite" for success and role="alert" for error.
• Button gets aria-busy="true" during pending.
• Heading semantic level via headingAs="h2" / "h3" / "h4".