Components

API error

Experimental

Added in January 2026. Contributed by Karen Simpson in ‘Digital Prison Services’.

How to use ‘experimental’ components

Anyone can add an ‘experimental’ status component to the MOJ Design System. They’re early in development and can be used as a starting point. Read about all the Design System statuses.

Use this component to tell users that information is missing because of an API error.

Contents

Overview

This component is used when data cannot be displayed from the API that it’s pulling it from. It alerts the user that there is some information missing from the page.

How the component is currently used

The component can be used as a standalone error. An example of this is the DPS homepage when a service cannot be displayed in the services section.

It can also be used in conjunction with a card-level error. An example of this is the DPS Prisoner profile overview page where data is being pulled from many APIs.

The API error will display at the top of the page to alert the user that some information is missing. We also alert the user with a smaller error displayed in the card the information is missing from, then the specific pieces of data that cannot be displayed are marked as ‘Unavailable’.

Contribute to this component

You can help develop this component by adding information to the ‘API error’ Github discussion. This helps other people to use it in their service.

A Figma link was not included when this component was added.

There may be more information in the ‘API error’ Github discussion. You can view the component image in the component overview.

Contribute a Figma link

If you have a Figma link for this component (or a component like it) you can add it to Github discussion. This helps other people to use it in their service.

No accessibility findings were included when this component was added. There may be more information in the ‘API error’ Github discussion.

Contribute accessibility findings

If you have accessibility findings that are relevant to this component you can add them to the Github discussion. This helps other people to use it in their service.

Code

Code has been added for this component. There may be other code blocks in the ‘API error’ Github discussion.

Code block 1: Nunjucks

    {%- from "govuk/macros/attributes.njk" import govukAttributes -%}
    
    {%- if params.inset %}
      <p class="moj-inset-api-error" {{ govukAttributes(params.attributes) }}>
        {%- if params.html %}
          {{- params.html | safe -}}
        {%- elif params.text %}
          {{- params.text -}}
        {%- else %}
          This information is currently unavailable. Try again later.
        {% endif -%}
      </p>
    {%- else %}
      <div class="moj-api-error" {{ govukAttributes(params.attributes) }}>
        {%- if params.html %}
          {{- params.html | safe -}}
        {%- elif params.text %}
          {{- params.text -}}
        {%- else %}
          <p>Sorry, there is a problem with the service</p>
          <p>Some information on this page may be unavailable. Try again later.</p>
        {% endif -%}
      </div>
    {%- endif %}
    
    

Code block 2: CSS

    @use "../../vendor/govuk-frontend" as *;
    
    .moj-api-error {
      padding: 16px 22px;
      background-color: govuk-colour('light-grey');
      border-left: 8px solid govuk-colour('red');
    
      p {
        @include govuk-font($size: 19, $weight: 'bold');
        color: govuk-colour('black');
        margin: 5px 0;
      }
    
      p + p {
        @include govuk-font($size: 19);
        margin-top: 0;
      }
    }
    
    .moj-inset-api-error {
      @include govuk-font($size: 16);
      padding: 4px 8px;
      border-left: $govuk-border-width solid govuk-colour('red');
      margin-bottom: 4px;
    }
    
    

Contribute code for this component

If you have code that is relevant to this component you can add it to the Github discussion. This helps other people to use it in their service.