SuccessPanel

The confirmation a form turns into once it is sent, with a receipt of what was received.

import { SuccessPanel } from '@zitdevs/ui';

Examples

Request received

A specialist will reply within one business day with the next steps.

Reference

ZD-24815

Sent to

[email protected]

With what the reader can do next, under the receipt:

Request received

A specialist will reply within one business day with the next steps.

Reference

ZD-24815

Sent to

[email protected]

Book a callBack to the home page

<SuccessPanel
  title="Request received"
  body="A specialist will reply within one business day with the next steps."
  receipt={[
    { label: 'Reference', value: 'ZD-24815' },
    { label: 'Sent to', value: '[email protected]' },
  ]}
  actions={<Button label="Book a call" href="/book" icon="arrow-right" />}
/>

Props

Prop	Type	Default	Notes
title	string	required	The heading.
body	string	required	Say what happens next.
receipt	readonly { label: string; value: string }[]	[]	Term and value pairs, such as the reference. Each label is a key, so unique.
headingLevel	HeadingLevel	2	2, 3 or 4, as the page’s outline needs.
actions	ReactNode	—	What the reader can do next, under the receipt: links or buttons.
ref	Ref<HTMLDivElement>	—	The status.
className	string	—	Placement.
anything else	<div> attributes	—	Except role, which is always status.

Exported type: SuccessPanelProps.

Accessibility

• role="status", with a real heading, so the confirmation is announced and can be found again.
• The receipt is a <dl> of terms and values; the reference sits where it can be selected and copied.
• The check is hidden; the heading says what it means.
• With no receipt and no actions, the panel ends on its body: no empty row follows it.

Without JavaScript

It renders on the server, and is at its best as the page a form’s POST returns. A role="status" that is already filled when it arrives is often not announced, so move focus to it: give it tabIndex={-1} and an id, and pair it with ResultAnchor (Forms), which focuses the result of a no-JS POST; after a client-side submit, focus it from the handler.

It fades in with animate-fade-in behind motion-safe:, so a reader who prefers reduced motion sees it at once.

Theming

surface-raised with a border-default frame and a 3px success rule on top; the check is success on success-soft. The title is ink, the body body, the receipt’s terms muted and its values ink on surface cells divided by border-default hairlines. The green is earned here: this is actual success.

Use instead: a success message above a form that stays → Alert tone="success".