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

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
  • Trevor Brennan avatar picture
  • Dominik Wilkowski avatar picture
  • Julian Fleetwood avatar picture
  • Simon Pascal Klein avatar picture
  • Gary Broadbent avatar picture
  • Alex Page avatar picture
  • Patrick De Young avatar picture

Info

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

Example

<!--
  Light:      <div role="alert" class="au-page-alerts au-page-alerts--info">
  Light Alt:  <div role="alert" class="au-page-alerts au-page-alerts--info au-page-alerts--alt">
  Dark:       <div role="alert" class="au-body au-body--dark au-page-alerts au-page-alerts--info au-page-alerts--dark >
  Dark Alt:   <div role="alert" 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 role="alert" 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 role="alert" class="au-page-alerts au-page-alerts--success">
  Light Alt:  <div role="alert" class="au-page-alerts au-page-alerts--success au-page-alerts--alt">
  Dark:       <div role="alert" class="au-body au-body--dark au-page-alerts au-page-alerts--success au-page-alerts--dark >
  Dark Alt:   <div role="alert" 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 role="alert" 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 role="alert" class="au-page-alerts au-page-alerts--error">
  Light Alt:  <div role="alert" class="au-page-alerts au-page-alerts--error au-page-alerts--alt">
  Dark:       <div role="alert" class="au-body au-body--dark au-page-alerts au-page-alerts--error au-page-alerts--dark >
  Dark Alt:   <div role="alert" 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 role="alert" 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 role="alert" class="au-page-alerts au-page-alerts--warning">
  Light Alt:  <div role="alert" class="au-page-alerts au-page-alerts--warning au-page-alerts--alt">
  Dark:       <div role="alert" class="au-body au-body--dark au-page-alerts au-page-alerts--warning au-page-alerts--dark >
  Dark Alt:   <div role="alert" 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 role="alert" 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>