Warning text

Open this example in a new tab: warning text
HTML
<div class="govuk-warning-text">
  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
  <strong class="govuk-warning-text__text">
    <span class="govuk-visually-hidden">Warning</span>
    You can be fined up to £5,000 if you do not register.
  </strong>
</div>
Nunjucks

See options and how to use with Nunjucks

{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

{{ govukWarningText({
  text: "You can be fined up to £5,000 if you do not register.",
  iconFallbackText: "Warning"
}) }}

When to use this component

Use the warning text component when you need to warn users about something important, such as legal consequences of an action, or lack of action, that they might take.

How it works

There are 2 ways to use the warning text component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

Open this example in a new tab: warning text second
HTML
<div class="govuk-warning-text">
  <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
  <strong class="govuk-warning-text__text">
    <span class="govuk-visually-hidden">Warning</span>
    You can be fined up to £5,000 if you do not register.
  </strong>
</div>
Nunjucks

See options and how to use with Nunjucks

{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}

{{ govukWarningText({
  text: "You can be fined up to £5,000 if you do not register.",
  iconFallbackText: "Warning"
}) }}

You might need to rewrite the hidden text (‘Warning’ in the example) to make it appropriate for your context.

Recent changes

Date Changed Description
Oct 2024 GOV.UK Frontend v5.7.0

Fixed text not appearing in bold if user agent styles were overridden.
Apr 2024 GOV.UK Frontend v5.3.1

Updated the icon colours to use the root text and background colours, rather than hardcoded as black and white. This allows the Warning text icon to change appearance if these colours are customised by a user.
Dec 2023 GOV.UK Frontend v5.0.0

Removed styles associated with the govuk-warning-text__assistive CSS class. Use the govuk-visually-hidden class instead.
Apr 2023 GOV.UK Frontend v4.6.0

Set a default value for the iconFallbackText parameter, so it no longer needs to be specifed manually.
May 2021 GOV.UK Frontend v3.12.0

Fixed icon outline appearing clipped when using Microsoft Edge in forced colours mode.

View full change history

Help improve this component

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.