NewsletterSignup
Email capture form with loading, success, and error states. Use it for footer signups, embedded editorial CTAs, and campaign landing pages.
Best for
Import
import { NewsletterSignup } from "@enadhq/enad-react-sdk/client/storefront"When to use it
Use NewsletterSignup wherever the storefront needs an email capture form: footer newsletter sections, embedded editorial CTAs, campaign landing pages, and exit-intent modals. It handles the full form lifecycle (idle, loading, success, error) so you only need to wire the submit handler.
Composition notes
NewsletterSignup is a self-contained form:
onSubmitreceives the email string. Return a promise for automatic loading state.labelsprovidesheadinganddescriptioncopy above the form.placeholder,buttonLabel, andsuccessMessagecustomize the form elements.errorMessageshows an external error (e.g., from a failed API call).
Behavior and theming guidance
The form shows a loading spinner while the onSubmit promise is pending, then transitions to the success message. If the promise rejects or errorMessage is set, the error state shows instead.
Colors respond to --enad-text-primary-color, --enad-text-muted-color, and --enad-error-color. The form fits naturally in footer slots, sidebar panels, and full-width editorial sections.
Examples
Live examples you can edit directly in the sandbox.
Basic signup form
A newsletter form with heading, description, and a subscribe button. The onSubmit handler receives the email string.
Async signup with loading
Return a promise from onSubmit to show a loading state while the subscription request is in flight.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onSubmit | (email: string) => void | Promise<void> | — | Async-compatible handler called with the submitted email address |
| placeholder | string | Enter your email | Placeholder text shown inside the email input field |
| buttonLabel | string | Subscribe | Label text for the submit button |
| successMessage | string | Thanks for subscribing! | Message displayed after a successful submission |
| errorMessage | string | — | Error message to display; setting this also puts the form into an error state |
| labels | string | {} | Optional heading and description text rendered above the form |
| className | string | — | No description yet. |