In-page notifications

Patterns Released patterns
1

Hi all,

We have just released the In-page notifications pattern. In-page notifications are used to contextually inform users of important information or status of an interaction.

For more information on the pattern and its use, please visit

https://www.digital.nsw.gov.au/design-system/patterns/page-notifications

image
image840×130 12.8 KB

As always, we appreciate any feedback.

The Design System team.

2

Hey guys, just an FYI that the icon for the critical notification is incorrect on the documentation page - In-page notifications | Digital.NSW It should be a cross icon as per Figma.

3

Hi @adham thanks for letting us know! We’ve updated this now so variants should have the correct corresponding icons.
https://www.digital.nsw.gov.au/digital-service-toolkit/design-system/component-library/page-content/page-notifications

1 Like
4

Hi team,
I noticed there are 2 kinds of usage for In-page alert component. I couldn’t find in the usage guidance when to use which. The 2 kinds of usage I’m talking about are:

  • Surface the alert with the heading and the highlight bar
  • Surface the alert without heading and without the highlight bar

Do you have any recommendation on when to use which of the above? Let me know.

5

Thanks @tnafoo! Yes we have introduced a slimmer variant of in-page alerts. The original, larger alerts that feature the heading and highlight bar can be used for delivering an alert for a section or overall context. The new slimmer in-page variant can be used for in-line alerts or where the alert needs to be isolated, such as in forms where it relates to just one field.

We had previously used this type of alert for form error warnings, and have surfaced it with more flexibility for use cases where the slimmer version is needed for info, warning and success as well as the original error state.

We’ll look to update the documentation site with more information about the different types to help with the clarification.

1 Like
6

Hi,

Will there be more guidance around the width of the in-page alert component? Attached below an example of one of the alerts on our app.

image
image1175×132 46.6 KB

7

Hi @tnafoo! Thanks for your post! The default sizing of the component is set to expand to fill the container or content area they are placed in (as you’re experiencing). However usage should take into account accessibility, especially readability text width. We advise looking at this the same as you would for text content. Also good to look at content area layouts you can utilise to help implement the best widths for different content types and components.