Confirmation message

<div class="ds_confirmation-message">
    <svg class="ds_confirmation-message__icon  ds_icon  ds_icon--24" aria-hidden="true" role="img">
        <use href="/assets/images/icons/icons.stack.svg#check_circle"></use>
    </svg>
    <h3 class="ds_confirmation-message__title">
        Landlord added successfully
    </h3>
    <div class="ds_confirmation-message__body">
        <p>You have added the landlord <strong>John Smith</strong> to the application.</p>
    </div>
</div>

About this component

The confirmation message tells a user they’ve completed an action when filling out a form.

It has a:

• heading
• line of body text – this is optional and can contain links
• green icon with a tick
• green left border

When to use this component

Use a confirmation message to reassure a user they've completed an action on a form.

For example, tell a user they’ve successfully:

• added information
• deleted information
• changed information

Decide between a confirmation message and a notification panel

Use a notification panel at the end of a form to tell a user they’ve successfully submitted a form.

Use a confirmation message:

• while the user is progressing through the form, or
• if the form is a simple interaction – for example, a feedback form

How to use this component

Use a confirmation message immediately after the user has successfully performed an action. It should disappear when the user refreshes the page or navigates away.

Only use one confirmation message at a time.

The message must be concise and tell the user in plain English what’s happened.

Use a green border and icon to indicate success. Do not use other colours.

Place the confirmation message close to where the user performed the action and above remaining fields or summary cards.

Apply keyboard focus to the fieldset element around the next actionable field, not the confirmation message itself.

Related guidance

Confirmation messages are used in forms and as part of the ‘add more fields’ pattern.

You should follow the guidance for:

• forms
• summary cards
• add more fields

Accessibility

Announce the confirmation message to assistive technology users who might not see it being added to a screen.

Give the confirmation message an `aria-live` attribute of ‘polite’ unless you have a different way of communicating this.

Evidence

This component was tested with users as part of a prototype of the ‘add more fields’ pattern.

The component performed well. Users noticed it confirmed they’d deleted information on a form.

Website analytics

To understand user behaviour, clicks on links in confirmation messages can be tracked through the click URL, the click text and a data attribute showing the interaction.

The data attribute is added automatically by the Design System’s ‘tracking’ script.