Warning text

Standard

Default

The default warning text uses a visually hidden fallback of "Warning" for the icon.

You can be fined up to £5,000 if you don’t register.

Show code

<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 don’t register.
  </strong>
</div>

---
import { WarningText } from "@i-dot-ai-npm/component-library-astro";
---

<WarningText>
  You can be fined up to £5,000 if you don’t register.
</WarningText>

import { WarningText } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <WarningText>
      You can be fined up to £5,000 if you don’t register.
    </WarningText>
  );
}

<script>
  import { WarningText } from "@i-dot-ai-npm/component-library-svelte";
</script>

<WarningText>
  You can be fined up to £5,000 if you don’t register.
</WarningText>

import { WarningText } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <WarningText>
      You can be fined up to £5,000 if you don’t register.
    </WarningText>
  );
}

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.