Success screen

The end of a flow: what happened, what it happened to, and the next thing to do.

Refined portWildSuccessScreen.vueFeedback/SuccessScreenWSuccessScreen

Try it

Change the tone and the copy changes with it. Press Replay to watch it arrive.

3 invites sent

We’ve emailed each of them a link to join Emu Park Orchard.

aroha.walker@emupark.co.nzOperator
sam.te-ao@emupark.co.nzViewer
priya.nair@baycitrus.co.nzViewer

Tone

Size

Items

Actions

Animate

<WildSuccessScreen
  headline="3 invites sent"
  subtitle="We’ve emailed each of them a link to join Emu Park Orchard."
  :items="invites"
  items-label="Invited people"
  :primary="{ label: 'Done', onClick: close }"
  :secondary="{ label: 'Invite more', onClick: next }"
/>

When to use

Use it to end a flow that changed something.
Use it in place of the form it confirms.

Don’t use it

When the person carries on where they were. Use a toast.
When the work failed. Use an alert.

Anatomy

Five parts, top to bottom. Only the mark and the headline always show.

3 invites sent

We’ve emailed each of them a link to join Emu Park Orchard.

aroha.walker@emupark.co.nzOperator
sam.te-ao@emupark.co.nzViewer
priya.nair@baycitrus.co.nzViewer

Mark: The tone disc in two rings. Decorative; the words carry the meaning.
Headline: What happened, with its count. A heading, 18px at 600.
Subtitle: What happens next, or what to check.
Items: What it happened to. Optional, and capped with “Show N more”.
Actions: The next step and a way on. Optional where a footer owns them.

The list stays left-aligned, so it scans like a table.

Tones

It all worked, some of it worked, or it was accepted and will finish later.

Alarm saved

Bore 12 alerts Operators below 18 kPa.

success

2 of 3 invites sent

One address bounced. Fix it to resend.

warning

Export queued

We’ll email you a link when it’s ready.

info

Sizes

Medium for a dialog. Small for a drawer, a side panel or a card.

Alarm saved

It’s watching Bore 12 now. The first check runs at the next reading.

md · dialog

Alarm saved

It’s watching Bore 12 now.

sm · drawer

Items

Three rows show, and the rest open behind Show N more.

11 of 12 invites sent

One address bounced. Fix it and we’ll send that invite again.

Failed: sam.te-ao@emupak.co.nzAddress not found
aroha.walker@emupark.co.nzOperator
priya.nair@baycitrus.co.nzViewer

Failed rows sort first, say why and always show. One hidden row just shows.

Entrance

Disc, rings, glyph, then words, in about half a second. Reduced motion shows the settled screen.

Alarm saved

It’s watching Bore 12 now.

Disc0–300

Inner ring60–440

Outer ring120–500

Glyph180–520

Headline100–300

Subtitle140–340

List180–380

Actions260–460

0200400600ms

The disc and the glyph dots are springs that settle in about 300ms. The strokes draw; the rings and words ease out.

In context

In a dialog, Done takes Send’s place in the footer, and focus moves to it.

New alarmStep 3 of 3

Alarm saved

It’s watching Bore 12 now. The first check runs at the next reading.

Site: Bore 12 · Emu Park
When: Soil moisture below 18 kPa for 30 min
Notify: Operators, by SMS and email

Without a footer, the screen brings its own actions and focuses Done on arrival.

Content

Put the count in a past-tense headline: 3 invites sent.
Say what happens next, or what to check, in the subtitle.
Make the primary Done, or the fix on a partial result.
Make the secondary the likeliest next task: Invite more.

Accessibility

A polite live region announces the headline and subtitle. With auto-focus, focus lands on the primary, so Enter finishes the flow.

Key	What it does
Tab	Moves to the list if it scrolls, then “Show N more”, then the actions.
Enter / Space	Presses the focused action, or opens and closes the list.

Props

Prop	Type	Default	Description
headline	string	—	What happened, with its count.
subtitle	string	—	What happens next.
variant	'success' \| 'warning' \| 'info'	'success'	Sets the disc, rings and glyph.
size	'md' \| 'sm'	'md'	Dialog, or drawer and panel.
items	(string \| { id?, label, meta?, failed? })[]	[]	What it happened to.
item-icon	string	'mail'	mail, user, site, logger, file, alarm or none.
items-label	string	—	Names the list for screen readers.
max-visible-items	number	3	Rows before “Show N more”.
primary	string \| { label, onClick?, icon? }	—	The next step, usually “Done”.
secondary	string \| { label, onClick?, icon? }	—	A bordered second action.
animate	boolean	true	Play the entrance.
auto-focus	boolean	false	Focus the primary, or the headline, on arrival.
announce	boolean	true	Announce the outcome politely.
title-as	'h2' \| 'h3' \| 'h4' \| 'p'	'h2'	Headline element.
#icon	slot	—	Replaces the glyph in the disc.
#default	slot	—	Anything between the list and the actions.

Tokens

Token	Value	Where it lands
--global-green-200 · 300	#E1FAEA · #C1F4D4	Success rings.
--global-squash-200 · 300	#FFF1DA · #FFE9BA	Warning rings.
--global-blue-200 · 300	#D6F4FF · #BDEDFF	Info rings.
--color-success	#019939	Success disc.
--global-squash-900	#C47E0A	Warning disc.
--global-blue-1000	#1877F2	Info disc and toggle label.
--global-blue-1100	#0C296A	Toggle label on hover.
--global-neutral-grey-1300	#0A090B	Headline.
--global-neutral-grey-1100	#2D2B32	Row label.
--global-neutral-grey-1000	#4F4D55	Subtitle and row meta.
--global-neutral-grey-900	#7F7D83	Item icon.
--global-neutral-grey-400	#ECECED	List frame.
--global-neutral-grey-300	#F1F1F1	Row dividers, and the pressed toggle.
--global-neutral-grey-200	#F5F5F5	Toggle ground on hover.
--global-red-100	#FEEBEB	Failed row ground.
--global-red-800	#E12121	Failed row icon.
--global-red-1000	#961616	Failed row meta.
--color-primary-active	#1877F2	Focus ring on the toggle and scroller.