Version
has been released! Read the upgrade guide

Alert

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

Alerts are a great way to provide contextual feedback to a user.

1Overview

2Usage

The usage of the Alert component is derived from the context it will be placed in. There are four Alert variations - info, success, warning, and danger. By default, the Info Alert should be used, with the stateful Alerts being placed to either confirm an action or inform the user that the action may be dangerous (e.g. deleting data).

3Anatomy

  1. Container: This wraps the component. By default, it extends the full width of its parent.

  2. Title (Optional): This can be added to the Alert when the Description alone is not sufficient enough.

  3. Description: This explains the Alert and is always required.

  4. Icon: The icon is always present, however changes depending on the State of the Alert component.

4Sizing & Spacing

The Alert is only available in one size. It can, however, grow vertically depending on the length of the description provided.

5Hierarchy & Placement

Alerts should generally be placed above the content in which they are referring to.

6States

The Alert Component has four states - info, success, warning, and danger.

7Variations

Each Alert comes in two variations - Title & Description, and just a Description.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright