Success messages

Pattern in development

We are refreshing this pattern to include new guidance and code.

Use a success message when you want to inform the user that a task has been successful.

For example, show a success alert on a subsequent page after submitting a form.

Don't overuse success messages. Don't add success validation to every text field.

Don't use full-page success messages. If a form is submitted successfully, consider a success alert component on the subsequent screen.

Use a toast to deliver a passive success message. Use a snackbar when you don't need to guarantee a user will notice the message.

Use alerts to give feedback after a significant task. Alerts are more likely to be noticed by users.

For example, use a success alert on a subsequent page after submitting a request to give the user a reference number.

Application submitted

Your application for 'additional coffee allowance' was submitted successfully.

Only use a summary page after submitting a form if you need the user to export the information.

Don't use a full page for a success message; use a snackbar or alert on a list or homepage instead.

Use success messages on text inputs if you need to validate information before submitting the form.

Use them in situations where you need immediate feedback, such as choosing a username.

Username

This username is available.

When building or using this pattern:

Make sure components such as alerts are announced to screen readers and other assistive technology.
Don't use colour on its own to convey that a problem has occurred; always include text.

Last reviewed 15 November 2022 .