Agriculture Design System
Beta
Design System for the Export Service

Page alert

Page alerts are colour-coded, non-disruptive notifications that provide Success, Error, Warning or Information messages at relevant times during the user journey. They should not be confused with Callouts.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/page-alert';

For general guidance on content, go to the TFTM content patterns.

  • use constructive, no-blame language, avoid vague descriptions and always provide a solution
  • keep it short – content should be easily understood at a glance

Length

  • Title: 1-3 words
  • Body copy: 1 short sentence where possible.
  • Primary action: 1-2 words
  • Secondary action: 1-2 words

Style

For general guidance on content, go to:

For DAFF staff, please refer to the internal departmental style guide.

There are slight variations between these guides. If guidance differs, follow the DAFF style guide first or the next in order down this list.

Language

Use plain language.

Avoid punctuation such as full stops, commas, or semicolons.

Write in Sentence case.

Avoid articles such as the, an, or a in titles and button copy.

Refer to the glossary for more information.

Voice and tone

Go to the TFTM Voice and tone guide for guidance.