Component

Success alert

Used at the top of the page, to summarise a successful user action.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/success_alert", {
  message: "Message to alert the user to a successful action goes here"
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Notification-banner

Accessibility acceptance criteria

should be focused on page load, to ensure the message is noticed by assistive tech
Should have a role of ‘alert’ to communicate that is a important and time sensitive message

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

id - accepts a string for the element ID attribute
data_attributes - accepts a hash of data attributes
aria - accepts a hash of aria attributes
classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale (defaults to no margin)
role - accepts a space separated string of roles
lang - accepts a language attribute value
open - accepts an open attribute value (true or false)
hidden - accepts an empty string, ‘hidden’, or ‘until-found’
tabindex - accepts an integer. The integer can also be passed as a string
dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
rel - accepts any valid rel attribute e.g. ‘nofollow’
target - accepts a valid target attribute e.g. ‘_blank’
title - accepts any string
draggable - accepts a draggable attribute value (“true” or “false”)

With message and description (preview)

Descriptions can be passed as plain text but it is strongly recommended that you pass these as html, cleaned using raw or sanitize.

<%= render "govuk_publishing_components/components/success_alert", {
  message: "Message to alert the user to a successful action goes here",
  description: sanitize("<p class=\"govuk-body\">A further description</p>")
} %>

With custom title (preview)

This is for the heading element at the head of the component (reading “Success” by default) where the id is used by an aria-labelledby on screen reader focus of the element.

Please ensure that this id is unique across the view you are building.

<%= render "govuk_publishing_components/components/success_alert", {
  message: "Message to alert the user to a successful action goes here",
  title_id: "my-custom-success-id"
} %>

With styled link (preview)

If you need to include a link in your success alert, you need to specify the govuk-link and govuk-notification-banner__link classes on that link element. This is in line with GOV.UK Design System guidance that the colour of the link in success notification banners can look jarring if any links are a different colour to the principal colour used by the success banner.

<%= render "govuk_publishing_components/components/success_alert", {
  message: "Message to alert the user to a successful action goes here",
  description: sanitize("<p class=\"govuk-body\">A further description with <a href=\"/a-cool-page\" class=\"govuk-link govuk-notification-banner__link\">a link</a></p>")
} %>

Long example (preview)

<%= render "govuk_publishing_components/components/success_alert", {
  message: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet
    dignissim dui, ac laoreet tortor vulputate nec. Aenean quis turpis
    orci. Proin semper porttitor ipsum, vel maximus justo rutrum vel.
    Morbi volutpat facilisis libero. Donec posuere eget odio non egestas.
    Nullam sed neque quis turpis.
    "
} %>

With custom margin bottom (preview)

The component accepts a number for margin bottom from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale. The default margins for the component are inherited from the notification-banner styles defined in the Design System.

<%= render "govuk_publishing_components/components/success_alert", {
  message: "Message to alert the user to a successful action goes here",
  margin_bottom: 3
} %>