Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Panel - success

Overview

Use the success panel following a submit button to confirm that the user has completed their overall task.

Open this example in a new tab (Example Panel With Success Message)

Example Panel With Success Message contents

Nunjucks

{% from "components/panel/_macro.njk" import onsPanel %}

{{
    onsPanel({
        "variant": 'success',
        "id": 'success-id',
        "iconType": 'check',
        "body": 'Information has been successfully submitted'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
bodystringtrueThe contents of the panel. This can contain HTML.
titlestringfalseThe title for the error summary panel (not supported for the warn, warn-branded, announcement and bare panels )
headingLevelintfalseNumber used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to 2
variantstringfalseA single value to adjust the component using available variants: "info", “success”, “bare”, “error”, “warn”, “warn-branded”, and “announcement”
spaciousbooleanfalseSet to “true” to double the padding spacing surrounding the body content if required
classesstringfalseCustom classes to add to the panel
idstringfalseThe HTML id for the panel
attributesobjectfalseHTML attributes to apply to the panel (for example, data attributes)
assistiveTextPrefixstringfalseSets the visually hidden prefix text for screen readers. Default values for each panel type:
  • info – “Important information: ”
  • success – “Completed: ”
  • warn and warn-branded – “Warning: ”
  • error– “Error: ”
  • announcement– “Announcement: ”
iconTypestringfalseAdds an icon to the panel, before the body content, by setting the icon type
iconSizestringfalseIcon size can be set to match the size of the body content text as detailed in the typography type scale

HTML

<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--success ons-panel--no-title"
  id="success-id">
  <span id="alert" class="ons-panel__assistive-text ons-u-vh">Completed: </span>
  <span class="ons-panel__icon ons-u-fs-r"><svg class="ons-icon" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg"
      focusable="false" fill="currentColor" role="img" title="ons-icon-check">
      <path
        d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
        transform="translate(-1.51 -3.04)" />
    </svg></span>
  <div class="ons-panel__body"> Information has been successfully submitted </div>
</div>

When not to use this component

Only use this component to confirm the user has completed an overall process. For example at the end of a survey.

Do not use this component to confirm more granular tasks such submitting information throughout a survey.

How to use this component

This example uses the iconType parameter to show the check icon in the panel. The size of the icon can be set to match the size of the font used in the panel.

There is specific guidance on how to set the size of an icon.

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Panel’ component on GitHub (opens in a new tab) 

Back to top