Warning text

A component to warn the user of something important.

WarningYou can be fined up to £5,000 if you do not register.

HTML
React

<div class="govuk-warning-text">
  <span
    class="govuk-warning-text__icon"
    aria-hidden="true"
  >
    !
  </span>
  <strong class="govuk-warning-text__text">
    <span class="govuk-warning-text__assistive">
      Warning
    </span>
    You can be fined up to £5,000 if you do not
    register.
  </strong>
</div>

<WarningText>
  You can be fined up to £5,000 if you do not
  register.
</WarningText>

Props

Name	Type	Description
id	string	'id' attribute to place on the base HTML element
classBlock	string	Block name override in BEM style classes applied to all elements
classModifiers	other	BEM style modifiers to apply to the base HTML element
className	string	Extra classes to apply to the base HTML element
assistiveText	string	Hidden text to be read out by a screen-reader prior to the 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

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

Stories

Standard

A standard Warning text.

WarningYou can be fined up to £5,000 if you do not register.

HTML
React

<div class="govuk-warning-text">
  <span
    class="govuk-warning-text__icon"
    aria-hidden="true"
  >
    !
  </span>
  <strong class="govuk-warning-text__text">
    <span class="govuk-warning-text__assistive">
      Warning
    </span>
    You can be fined up to £5,000 if you do not
    register.
  </strong>
</div>

<WarningText>
  You can be fined up to £5,000 if you do not
  register.
</WarningText>

Custom assistive text

Warning text with custom hidden text for users of screen-readers.

CautionFloors may be slippery when wet.

HTML
React

<div class="govuk-warning-text">
  <span
    class="govuk-warning-text__icon"
    aria-hidden="true"
  >
    !
  </span>
  <strong class="govuk-warning-text__text">
    <span class="govuk-warning-text__assistive">
      Caution
    </span>
    Floors may be slippery when wet.
  </strong>
</div>

<WarningText assistiveText="Caution">
  Floors may be slippery when wet.
</WarningText>