Panel - success

Overview

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

Example Panel With Success Message contents

Nunjucksfor Example Panel With Success Message
Nunjucks macro optionsfor Example Panel With Success Message
HTMLfor Example Panel With Success Message

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

Name	Type	Required	Description
body	string	true	The contents of the panel. This can contain HTML.
title	string	false	The title for the error summary panel
titleTag	string	false	The HTML heading tag for the `title`. Use to ensure the title has a correct semantic order on the page. Will default to an `h2`
type	string	false	A single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “warn-branded”, and “announcement”
spacious	boolean	false	Set to “true” to double the padding spacing surrounding the body content if required
classes	string	false	Custom classes to add to the panel
id	string	false	The HTML `id` for the panel
attributes	object	false	HTML attributes to apply to the panel (for example, data attributes)
assistiveTextPrefix	string	false	Sets the visually hidden prefix text for screen readers. Default values for each panel type: `information` and `branded` – “Important information: ” `success` – “Completed: ” `warn` and `warn-branded` – “Warning: ” `error`– “Error: ”
iconType	string	false	Adds an icon to the panel, before the body content, by setting the icon type
iconSize	string	false	Icon 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)

Cookies on ons.gov.uk