Version
has been released! Read the upgrade guide

Toast

The documentation on this page is considered legacy.

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

Toasts provide brief messages about application state.

Overview

The Toast component provides a way to send notifications to the user.

1Usage

Use Toasts to push messages to your users, based on actions they may perform.

2Anatomy

  1. Label. Text label to display at the top of the component

  2. Time. Timestamp displaying when the Toast was triggered.

  3. Close button. Dismisses the Toast.

  4. Description. Accompanying text for additional context.

3Sizing & Spacing

The Toast is of a fixed width, but will resize vertically to fit multiple lines of text within it.

4Hierarchy & Placement

Toast components sit in the top right of the viewport. If multiple are triggered, they stack vertically.

5States

The Toast component has four available states: Default, Danger, Warning, and Success.

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