Confirmation

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.'

Content highlight

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.

Call to action

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

Plain example

Content highlight

Use composition

Content confirmation icon

Editorial

Success status (h1)

Message should reflect the finished state of the action. E.g. Member makes a payment and we process it, "We've processed your payment."

Status of transaction (h2)

Further explanation.

Body text

What will happen next.

Implementation

Pass statusText, statusDescription and 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.

See also

Content Highlight, Buttons and Links, Heading.