The Australian Government coat of Arms

Communities of practice

Communities of practice

Modal - Generic

myGov Beta component

The following are variations of the Generic Modal component.

This component appears as an overlay on a page. The background colour is #000000 with 75% opacity.

UX owner: Alvin Soh
VD owner: Rachel Bell

Sketch file:
DTA-04-Modal-Generic.sketch (473.1 KB)


  1. Modal - Text only

It includes the following elements:

  • Heading
  • Description (can include ordered and unordered lists)
  • Close (‘x’) button

If there is a small amount of text, the modal will have a smaller max-width. The larger width is used for larger chunks of text and allows for scrolling.

Rationale for submission:
No equivalent component in DTA Design System. Provides user with contextual information without taking them way from current page.

InVision links:

Desktop

Mobile
https://deloitteaustralia.invisionapp.com/share/37YE8SOSTMD


  1. Modal - Text and CTA

It includes the following elements:

  • Heading
  • Subheading (optional)
  • Description
  • Tertiary button
  • Primary button
  • Close (‘x’) button

Rationale for submission:
No equivalent component in DTA Design System. Allows user to perform an action without taking them way from current page, therefore keeping the action in context with that page.

InVision links:

Desktop example (Inbox)

Mobile example (Inbox)
https://deloitteaustralia.invisionapp.com/share/KGY9SN9ASV7


  1. Modal - Input field and CTA

It includes the following elements:

  • Heading
  • Input field
  • Close (‘x’) button

The modal height responds based on the amount of text and will expand to allow for an error message on the input field.

Rationale for submission:
No equivalent component in DTA Design System. Allows user to perform an action without taking them way from current page, therefore keeping the action in context with that page.

InVision links:

Desktop example (Inbox)
https://deloitteaustralia.invisionapp.com/share/8SYE7GUHG2Q

Mobile - similar to Text, input field and CTA (see below)


  1. Modal - Text, input field and CTA

It includes the following elements:

  • Heading
  • Description
  • Input field
  • Close (‘x’) button

The modal height responds based on the amount of text and will expand to allow for an error message on the input field.

Rationale for submission:
No equivalent component in DTA Design System. Allows user to perform an action without taking them way from current page, therefore keeping the action in context with that page.

InVision links:

Desktop example (Inbox)
https://deloitteaustralia.invisionapp.com/share/6TYE7GQKPF8

Mobile example (Inbox)
https://deloitteaustralia.invisionapp.com/share/VKYE7HV4MS9