Section alert
Section alerts are non-disruptive notifications that provide Success, Error, Warning, Information and Progress messages about a state change in a section of a page.
import { ... } from '@ag.ds-next/react/section-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:
- Content styles
- Content patterns.
- Australian Government Style Manual
- How to create guidance in the Export Service.
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.
Composition
Section alerts are composed of an icon, title, description, action and close action.
The icon and title are mandatory and achieve a compact alert, but we encourage the use of description when additional information might be helpful to the user.
<Stack gap={1}> <SectionAlert onClose={console.log} title="Section alert title" tone="successHigh" /> <SectionAlert title="Section alert title" tone="successHigh"> <Text as="p">Description</Text> </SectionAlert> <SectionAlert title="Section alert title" tone="warningHigh"> <Stack gap={0.5} alignItems="flex-start"> <Text as="p">Description</Text> <ButtonGroup> <Button variant="text">Action 1</Button> <Button variant="text">Action 2</Button> </ButtonGroup> </Stack> </SectionAlert> </Stack>