Components
NewsletterSignup
Unstable: an email capture with a visible Email label, the browser's validation shown inline, a pending Subscribe button and a success message read aloud. Import it from @nizivo/react/unstable/newsletter-signup.
Examples
Basic
A signup: what people get, a visible Email label, and a note on what happens next.
import type { JSX } from 'react';
import { NewsletterSignup } from '@nizivo/react/unstable/newsletter-signup';
export function NewsletterSignupExample(): JSX.Element {
return (
<NewsletterSignup
title="Release notes, monthly"
description="New components, token changes and accessibility fixes. No spam."
note="Unsubscribe any time. We never share your email."
/>
);
}
Import
import { NewsletterSignup } from '@nizivo/react/unstable/newsletter-signup';
// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/button.css and @nizivo/react/css/field.css and @nizivo/react/css/input.css
import '@nizivo/react/css/newsletter-signup.css';Static or interactive
Client. It is a form that waits for onSubscribe. How to choose.
Use
title (h3 by default) and description say what people get; note what happens next. The field
is a Field with an type="email" Input and
autocomplete="email", named by its visible label, never a placeholder alone. The browser's own
validation shows inline, in the words of labels.missing and labels.invalid. Subscribe is pending
while onSubscribe runs; if it throws, its message shows under the field, and on success a polite
live region says "Thanks — check your inbox to confirm."
Props
Client component Renders data-slot="newsletter-signup" with the class nz-newsletter-signup. Props: NewsletterSignupProps. Source: src/unstable/newsletter-signup/newsletter-signup.client.tsx.
| Name | Type | Default | Description |
|---|---|---|---|
description | ReactNode | – | What they get: "New components, token changes and accessibility fixes. No spam." |
headingLevel | 2 | 3 | 4 | 3 | The title's level. |
labels | Partial<NewsletterSignupLabels> | – | |
note | ReactNode | – | Under the form: "Unsubscribe any time. We never share your email." |
onSubscribe | (email: string) => void | Promise<void> | – | Subscribes the address; a thrown Error's message shows under the field. |
placeholder | string | 'e.g. name@example.com' | |
render | RenderProp<NewsletterSignupState> | – | Must render a |
titlerequired | ReactNode | – |
- Also takes every attribute of
<section>exceptchildren,onSubmit,title. (Omit<ComponentPropsWithRef<"section">, "title" | "children" | "onSubmit">)
render takes an element, or, in client code, a function of the props and this state (NewsletterSignupState):
| Name | Type | Default | Description |
|---|---|---|---|
statusrequired | "idle" | "pending" | "done" | – |
Other exports
NewsletterSignupLabelstypeimport type { NewsletterSignupLabels } from '@nizivo/react/unstable/newsletter-signup'NewsletterSignup's own strings (§16.4): serialisable, English defaults.
Name Type Default Description emailrequiredstring'Email'invalidrequiredstring'Enter an email address like name@example.com.'When the address is not one.
missingrequiredstring'Enter your email address.'When the address is missing.
subscriberequiredstring'Subscribe'successrequiredstring'Thanks — check your inbox to confirm.'Announced after a signup.
NewsletterSignupPropstypeimport type { NewsletterSignupProps } from '@nizivo/react/unstable/newsletter-signup'The props of
NewsletterSignup, listed above.NewsletterSignupStatetypeimport type { NewsletterSignupState } from '@nizivo/react/unstable/newsletter-signup'The render state of
NewsletterSignup, listed above.
Data attributes and slots
Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.
| Slot | Rendered by | Data attributes |
|---|---|---|
newsletter-signup.nz-newsletter-signup | NewsletterSignuproot (takes render) | none |
CSS hooks
Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.
This stylesheet reads no public hook.
Layers: nz.components. Classes: .nz-button, .nz-newsletter-signup, .nz-newsletter-signup-description, .nz-newsletter-signup-field, .nz-newsletter-signup-form, .nz-newsletter-signup-note, .nz-newsletter-signup-status, .nz-newsletter-signup-title.
Tokens this stylesheet reads (17)
--nz-bg-brand-subtle, --nz-font-body-m, --nz-font-body-s, --nz-font-heading-h3, --nz-font-label-m, --nz-font-label-m-font-size, --nz-font-label-m-line-height, --nz-radius-xl, --nz-space-1, --nz-space-1-5, --nz-space-2, --nz-space-4, --nz-space-8, --nz-text-primary, --nz-text-secondary, --nz-text-success, --nz-tracking-heading-h3
Accessibility
Nothing in this component takes focus or keyboard input.
Keyboard
None.
NavItem
One sidebar destination, as a native link with an icon, a label and an optional count. The current one is aria-current="page"; a router's link goes in through render. In a Sidebar's icon rail it folds to its icon, with no prop; SidebarItem adds the rail's Tooltip.
NotificationItem
Unstable: one row of activity in a panel or an inbox, who did what and when, as one link; unread rows are tinted, carry a dot and say "Unread". Import it from @nizivo/react/unstable/notification-item.