Newsletter Signup

Overview

A self-contained email capture form. The caller provides an async onSubmit handler; the component manages all UI state transitions (idle, loading, success, error) internally. Three layout variants are available: default (inline), split (two-column with feature panel), and banner (full-width centered).

Usage

import { NewsletterSignup } from "@leanicon/web-builder-library";

Default

Minimal form with just an email input and subscribe button.

With title and description

Add title and description to provide context above the form.

With consent text

Add consentText to display a privacy disclaimer below the form.

Custom button label

Override the default "Subscribe" text via buttonLabel.

Title only

Heading without description or consent text.

Split

Two-column layout with a primary-colored left panel showing title, description, and feature checklist. The form sits in the right panel.

Split — without features

Split — title only

Banner

Full-width section with bg-primary background. Content and form are centered in the same container.

Banner — without features

Banner — title only

Banner — with consent text

Dark mode

With title and description — dark mode

With consent text — dark mode

Split — dark mode

Banner — dark mode

Props

Notes

• On success, the form is replaced by a "Thank you for subscribing!" message.
• Errors thrown by onSubmit are caught and displayed as destructive text below the input.
• The button shows a spinner and "Subscribing..." text during the loading state.
• Split variant: two-column layout with bg-primary left panel for content and bg-background right panel for the form.
• Banner variant: full-width bg-primary section with centered content and form in a single column.
• Feature items render with a CircleCheck icon from Lucide.
• Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.