onSubscribe–
(email: string) => Promise<void> | voidCalled with a valid, trimmed email. Resolve for the done state; reject to show the error (the error's message, if it has one, else labels.subscribeError). Without it, the designed demo timing plays and nothing is sent (a one-time console warning in development).
email / defaultEmail / onEmailChange"" (uncontrolled)
string / string / (email: string) => voidThe email field, controlled or uncontrolled. onEmailChange fires on typing and when resetAfterSubscribe empties the field.
status / onStatusChange–
"idle" | "error" | "sending" | "done" / (status) => voidThe newsletter state (GlassFooterStatus), controlled or uncontrolled. Pass status="done" for users who are already subscribed; onStatusChange reports every transition (invalid → error, submit → sending → done or error).
validateEmailisGlassFooterEmail
(email: string) => boolean | stringReplaces the built-in check (name@domain.tld). Return true for valid, false to show newsletter.invalidNote, or a string to show that message.
resetAfterSubscribe–
numberMilliseconds the done state shows before the form empties again for another address (kiosks, demo pages). Default: it stays done.
wordmarkbrand.name
string | nullThe giant word across the bottom. null hides it.
backToToptrue
booleanRound button that smooth-scrolls to the top.
scrollTargetthe window
RefObject<HTMLElement | null>What back to top scrolls: pass a ref to your scroll container or modal body when the page doesn't scroll the window.
onBackToTop–
(event: MouseEvent) => voidCalled when back to top is pressed. Call event.preventDefault() to skip the built-in scroll (e.g. to scroll with your own library).
linkComponent"a"
React.ElementTypeRenders every link (brand, columns, legal, socials) with href, className, style, children, onClick, onMouseEnter, onFocus, onBlur, aria-label and, for external links, target/rel. Pass Next.js Link for client-side navigation.
onLinkClick–
(link: { kind: "brand" | "column" | "legal" | "social"; label; href; external }, event) => voidFires on any footer link click, for analytics. preventDefault() in it stops the navigation.
labelsdefaultGlassFooterLabels
Partial<GlassFooterLabels>Every built-in string that isn't content: nav ("Footer"), email ("Email address"), subscribing, subscribed, subscribeError, opensInNewTab, social: (name) => aria-label (opensInNewTab is appended), backToTop. Newsletter copy stays in newsletter.
maxWidth1040 (var(--glass-max-width, 1040px))
number | stringLargest width of the card; it fills its container up to this. Also settable with the CSS variable --glass-max-width on the footer or any ancestor. "none" removes the cap.
motion"full"
"full" | "subtle" | "off"full: the designed motion. subtle: calm curve, shorter. off: instant. prefers-reduced-motion is always respected.
theme"system"
"system" | "dark" | "light"system follows a .dark / .light class or data-theme on an ancestor (next-themes, shadcn), else the OS.
className / style / ref / id / aria-* / data-* / on*–
HTML attributes of <footer>Passed to the root <footer> (the contentinfo landmark). style is applied last, so it can override maxWidth or set CSS variables inline; ref points at the <footer>.
CSS variables–
--glass-max-width, --glass-bad, --glass-good (+ -dark / -light, -text)Set on the footer or any ancestor. --glass-max-width caps the card (default 1040px). --glass-bad colours the invalid ring and error note, --glass-good the done ring and note; -dark / -light variants win per theme and --glass-bad-text / --glass-good-text set just the note text. Defaults are the designed colours.
