Confirmation screens should contain a clear, answer-first heading. If this is all the user reads, they'll know they've successfully completed whatever action they were taking. Example: 'We've got your application'.
The body should provide any further information you need to tell the user. Keep this to just a sentence or two. Example: 'We've sent you an email to confirm we've got it.'
If there's more information the user needs to know, such as any extra steps they or Bulb will need to take, you can use a content highlight - this appears within a grey box beneath the main body. For example, if you need to tell the user how long it'll take to process an application, and how we'll follow up with them.
The CTA at the bottom of a confirmation screen should provide the user with an onward step, with a label that reflects that step.
If the action they've taken is in their Bulb account, you'll usually send them to their account's homepage when they're done. Use the CTA 'Go to Bulb account'.
If there's a specific part of the Bulb account that relates to the action they've taken, send them there instead. For example, if they've just topped up their payments, you might want to use 'Go to Payments and statements'.
Avoid the following as CTAs:
- 'Done' - it suggests the action hasn't been finished until they've clicked this button
- 'Back to Bulb account' - the user won't necessarily have started off in their Bulb account, for example if they followed a link from an email
- 'Go to dashboard' - the user might not know this refers to the Bulb account homepage
Message should reflect the finished state of the action. E.g. Member makes a payment and we process it, "We've processed your payment."
What will happen next.
buttonText as the required parameters to use this pattern. The
statusDescription can either be a text string
or a component itself.
There is an option to pass a
highlightedContent which will render inside the Content Highlight pattern.
Instead of passing a
buttonText prop, children can be used instead to render custom buttons or other components.