---
name: Confirmation
menu: Patterns
parent: Modules
route: /patterns/confirmation
---

# Confirmation

Confirmation screen lets users know they’ve successfully completed an action.

```specimen-react
<Confirmation
  statusTitle="You’ve topped up £14.90"
  statusDescription="You’ll see the £14.90 in your Bulb account in 3-5 working days."
  buttonText="View your payments" />
```

#### Link

```specimen-react
<Confirmation
  statusTitle="We've saved your progress"
  statusDescription={
    <React.Fragment>
      <p>Use this link to dive back in. We’ve popped it in an email to you too.</p>
      <CtaButton purpose="plain">
        thisisalink.com
      </CtaButton>
    </React.Fragment>
  }
  buttonText="Jump back in" />
```

#### Content highlight

```specimen-react
<Confirmation
  statusTitle="We have your application"
  statusDescription="We’ve sent you an email to confirm we’ve received it."
  buttonText="Return to the Bulb Account"
  highlightedContent={
    <Vspace>
      <Heading size="dolphin" level="h3">Next steps</Heading>
      <p>We will verify your application and get back to you if we have any questions. The verification process can take a couple of months.</p>

      <p>Once we have successfully verified your application, we will transfer the £140 Warm Home Discount credit to your account. You should receive the payment in late November.</p>
    </Vspace>
  }>
</Confirmation>
```

#### Use composition

```specimen-react
<Confirmation
  statusTitle="We have your application"
  statusDescription="We’ve sent you an email to confirm we’ve received it."
>
  <CtaLink
    purpose="primary"
  >
  Go somewhere else
  </CtaLink>
</Confirmation>
```

## 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](/patterns/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](/patterns/content-highlight),
[Buttons and Links](/patterns/buttons),
[Heading](/patterns/heading).
