SuccessPanel

The dominant element on a confirmation page — a prominent panel that says, in plain language, that a multi-step task has finished, and (optionally) shows a reference number and what happens next.

The component is built around a configurable heading (defaulting to <h1> because the confirmation panel is normally the page's main heading) and a body slot for follow-up information: confirmation reference, what to expect next, links to related services, contact details. The wrapping <div> is exposed as role="alert" with aria-live="polite" so screen readers announce the heading when the page loads, even if focus has not yet been moved into it.

This is heavier than Alert (which is for inline status inside a longer page) and Notification / Toast (which are transient). Reach for SuccessPanel only at the end of a discrete task — form submission, payment, booking, account creation — when the page changes role from "perform task" to "confirm task complete".

Example

SuccessPanel

Show demo markup

<div class="success-panel" aria-label="a panel confirming a task has been completed">SuccessPanel</div>

Usage example

<SuccessPanel title="Application complete" reference="HDJ2123F">
  <p>We have sent you a confirmation email.</p>
</SuccessPanel>

Show Svelte source

// In your Svelte component:
import SuccessPanel from "lily-design-system-svelte-headless/components/SuccessPanel/SuccessPanel.svelte";

<SuccessPanel>
  <!-- content -->
</SuccessPanel>

Usage

<SuccessPanel title="Application complete" reference="HDJ2123F">
  <p>We have sent you a confirmation email.</p>
</SuccessPanel>

Props

Prop	Type	Default	Description
`title`	string (required)	—	Confirmation headline
`headingLevel`	1	2	3	4	5	6	1	Heading level used for `title`
`reference`	string	—	Optional reference number shown beneath the title
`children`	slot	—	Body content (next steps, links, etc.)
`...restProps`	HTML attributes	—	Spread onto the root `<div>`

Keyboard Interactions

No keyboard interactions on the panel itself
Focus is moved to the panel by the consumer when navigating to the confirmation page so screen readers announce it immediately

ARIA

role="alert" exposes the panel as an alert region
aria-live="polite" ensures the heading and body are announced when the panel renders
Heading level is configurable via the headingLevel prop (default <h1> — confirmation pages typically use the panel as the page's main heading)

When to Use

Confirming completion of a multi-step transaction (form submission, payment, booking)
Communicating that a destructive or irreversible action succeeded

When Not to Use

Use Alert for inline success messages within a longer page
Use Notification or Toast for transient confirmations
Use Banner for non-task-confirmation announcements

Headless

This headless component renders semantic HTML with appropriate ARIA wiring. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The component renders with .success-panel as the root class. No default styles are included.

Related components

alert — inline status messaging
notification — transient confirmation
info-state — empty/error/info state composition

References

Implementation Notes

Renders a <div role="alert" aria-live="polite"> so completion is announced to assistive technology
Contains a heading (configurable level) and a message body slot
Optionally renders a follow-up actions area (links/buttons) inside the panel
Best placed at the top of the post-submission page, replacing the form
Spreads restProps onto the root <div>

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

Component: success-panel
PascalCase: SuccessPanel
Description: a panel confirming a task has been completed
Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
HTML tag: <div>
CSS class: .success-panel
Interactive: no

ARIA

role="alert" exposes the panel as an alert region
aria-live="polite" ensures the heading and body are announced when the panel renders
Heading level is configurable via the headingLevel prop (default <h1> — confirmation pages typically use the panel as the page's main heading)

Keyboard

No keyboard interactions on the panel itself
Focus is moved to the panel by the consumer when navigating to the confirmation page so screen readers announce it immediately

Props

title: string (required) (default: —) — Confirmation headline
headingLevel: 1 | 2 | 3 | 4 | 5 | 6 (default: 1) — Heading level used for title
reference: string (default: —) — Optional reference number shown beneath the title
children: slot (default: —) — Body content (next steps, links, etc.)
...restProps: HTML attributes (default: —) — Spread onto the root <div>