The action component highlights important or crucial content to users, suggesting when they may need to complete an action.

Design preview and code implementation

The component displays content in a different coloured box, depending on the urgency of the action needed.

When to use this component

Use this component to help users understand they may need to complete an action.

Depending on the urgency of the action needed, you may use:

• Non-urgent (blue version): Content where the action is not urgent for the safety of a user. For example, ‘Ring 101 or complete an online form’.
• Urgent (red version): Content where the action is paramount to the safety of the user. For example, ‘Ring 999 immediately’.

When not to use this component

The component should be used for clear and concise messages where an action may be needed. It should not be used for longer messages as this can add unnecessary length to the page.

Avoid using this component multiple times next to each other as this can make the page difficult to scan and may confuse the user as to which message is important.

Example of where we have used this component

This component is used on:

• ASP website
• OPCC wesite

This list is not exhaustive.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.