dta.gov.au

The .gov.au means it’s official

Australian government websites always use a .gov.au domain. Before sharing sensitive information online, make sure you’re on a .gov.au site by inspecting your browser’s address (or 'location') bar.

This site is secure.

The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Page alerts

v2.1.2

Page alerts are used to notify users of important information or changes on a page, in a way that attracts the user's attention without interrupting the user's task. Typically they appear at the top of a page following a submit action.

Released

History
View changes
Install
npm i @gov.au/page-alerts
Tags
Requires
Contributors
  • Simon Pascal Klein avatar picture
  • Trevor Brennan avatar picture
  • Gary Broadbent avatar picture
  • Dominik Wilkowski avatar picture
  • Patrick De Young avatar picture
  • Alex Page avatar picture
  • Julian Fleetwood avatar picture

Info

Page alerts are intended for important time-sensitive information only and should be used sparingly.

Example

<!--
  Light:      <div class="au-page-alerts au-page-alerts--info">
  Light Alt:  <div class="au-page-alerts au-page-alerts--info au-page-alerts--alt">
  Dark:       <div class="au-body au-body--dark au-page-alerts au-page-alerts--info au-page-alerts--dark >
  Dark Alt:   <div class="au-body au-body--dark au-body--alt au-page-alerts au-page-alerts--info au-page-alerts--dark au-page-alerts--alt">
-->

<div class="au-body au-page-alerts au-page-alerts--info">
  <h3>Important</h3>
  <p>Alert Content</p>
</div>
/*
  Light:      <AUpageAlert as='info'>
  Light Alt:  <AUpageAlert as='info' alt>
  Dark:       <AUpageAlert as='info' dark>
  Dark Alt:   <AUpageAlert as='info' dark alt>
*/

import AUpageAlert from '@gov.au/page-alerts';

<AUpageAlert as='info'>
  <h3>Important</h3>
  <p>Alert Content</p>
</AUpageAlert>

Success

The success page alert is used for notifying the user that a task is fully completed.

Example

<!--
  Light:      <div class="au-page-alerts au-page-alerts--success">
  Light Alt:  <div class="au-page-alerts au-page-alerts--success au-page-alerts--alt">
  Dark:       <div class="au-body au-body--dark au-page-alerts au-page-alerts--success au-page-alerts--dark >
  Dark Alt:   <div class="au-body au-body--dark au-body--alt au-page-alerts au-page-alerts--success au-page-alerts--dark au-page-alerts--alt">
-->

<div class="au-body au-page-alerts au-page-alerts--success">
  <h3>Success</h3>
  <p>Alert Content</p>
</div>
/*
  Light:      <AUpageAlert as='success'>
  Light Alt:  <AUpageAlert as='success' alt>
  Dark:       <AUpageAlert as='success' dark>
  Dark Alt:   <AUpageAlert as='success' dark alt>
*/

import AUpageAlert from '@gov.au/page-alerts';

<AUpageAlert as='success'>
  <h3>Success</h3>
  <p>Alert Content</p>
</AUpageAlert>

Error

The error page alert should be used with form validation errors or other errors which will block the user from completing their task.

Example

<!--
  Light:      <div class="au-page-alerts au-page-alerts--error">
  Light Alt:  <div class="au-page-alerts au-page-alerts--error au-page-alerts--alt">
  Dark:       <div class="au-body au-body--dark au-page-alerts au-page-alerts--error au-page-alerts--dark >
  Dark Alt:   <div class="au-body au-body--dark au-body--alt au-page-alerts au-page-alerts--error au-page-alerts--dark au-page-alerts--alt">
-->

<div class="au-body au-page-alerts au-page-alerts--error">
  <h3>Error</h3>
  <p>Alert Content</p>
</div>
/*
  Light:      <AUpageAlert as='error'>
  Light Alt:  <AUpageAlert as='error' alt>
  Dark:       <AUpageAlert as='error' dark>
  Dark Alt:   <AUpageAlert as='error' dark alt>
*/

import AUpageAlert from '@gov.au/page-alerts';

<AUpageAlert as='error'>
  <h3>Error</h3>
  <p>Alert Content</p>
</AUpageAlert>

Warning

Use warning page alerts to tell the user something urgent. Only use an alert if the information will help the user avoid a problem.

Example

<!--
  Light:      <div class="au-page-alerts au-page-alerts--warning">
  Light Alt:  <div class="au-page-alerts au-page-alerts--warning au-page-alerts--alt">
  Dark:       <div class="au-body au-body--dark au-page-alerts au-page-alerts--warning au-page-alerts--dark >
  Dark Alt:   <div class="au-body au-body--dark au-body--alt au-page-alerts au-page-alerts--warning au-page-alerts--dark au-page-alerts--alt">
-->

<div class="au-body au-page-alerts au-page-alerts--warning">
  <h3>Warning</h3>
  <p>Alert Content</p>
</div>
/*
  Light:      <AUpageAlert as='warning'>
  Light Alt:  <AUpageAlert as='warning' alt>
  Dark:       <AUpageAlert as='warning' dark>
  Dark Alt:   <AUpageAlert as='warning' dark alt>
*/

import AUpageAlert from '@gov.au/page-alerts';

<AUpageAlert as='warning'>
  <h3>Warning</h3>
  <p>Alert Content</p>
</AUpageAlert>