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.3

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
  • Patrick De Young avatar picture
  • Trevor Brennan avatar picture
  • Gary Broadbent avatar picture
  • Dominik Wilkowski avatar picture
  • Simon Pascal Klein avatar picture
  • Julian Fleetwood avatar picture
  • Alex Page 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>Notice</h3>
  <p>All vacancies close on the advertised closing date unless otherwise specified.</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>Notice</h3>
 <p>All vacancies close on the advertised closing date unless otherwise specified.</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>Submission successful</h3>
  <p>Your application has been successfully submitted.</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>Submission successful</h3>
  <p>Your application has been successfully submitted.</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>There is a problem</h3>
  <ul>
      <li><a href="#">Full name must not be empty</a></li>
      <li><a href="#">Email must not be empty</a></li>
      <li><a href="#">Description must not be empty</a></li>
  </ul>
</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>There is a problem</h3>
  <ul>
      <li><a href="#">Full name must not be empty</a></li>
      <li><a href="#">Email must not be empty</a></li>
      <li><a href="#">Description must not be empty</a></li>
  </ul>
</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>Browser out of date</h3>
  <p>Your web browser is out of date.</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>Browser out of date</h3>
  <p>Your web browser is out of date.</p>
</AUpageAlert>