Feedback Inidcators

Standard Toasts

Information

Toasts are used to notify the user of the response that was given from their trigger/action. There are 5 different variations of toasts and should be used in accordance to the type of response.

Success Toast

Visual Example
This container confirms a successful transaction with the user.

Code Usage

										

											

											

												
This container confirms a successful transaction with the user.

Error Toast

Visual Example
This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional. This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional.

Code Usage

										

											

											

												
This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional. This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional.

Warning Toast

Visual Example
This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional. This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional.

Code Usage

										

											

											

												
This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional. This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional.

Information Toast

Visual Example
This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional. This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional.

Code Usage

										

											

											

												
This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional. This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional.

Other Information Toast

Visual Example
This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional. This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional.

Code Usage

										

											

												

												

													
This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional. This container confirms a successful transaction with the user. The icon indicating the status on the left is required for accessibility, but the close icon is optional.

Toast Callouts

Information

Toast callouts are static toasts that sit above or below a form to display relevant information to the user. They can also be extended to hide/show using jQuery or other various methods. The close button within the callout can also be removed without any repercussions if it is static.

Visual Example

Callout with Trigger Hide/Show

Children as beneficiaries

A child is a person under 25 years of age. If the child becomes older than 25 years of age, what happens to the status of them as a child reversionary beneficiary? Does it need to be updated? Please provide copy explaining.

Static Toast Callout

Children as beneficiaries

A child is a person under 25 years of age. If the child becomes older than 25 years of age, what happens to the status of them as a child reversionary beneficiary? Does it need to be updated? Please provide copy explaining.

Code Usage

Toast Callout with Close Icon
										

											

											

												

													
												

												

													

														

															
														

														
Children as beneficiaries

													

													

														
A child is a person under 25 years of age. If the child becomes older than 25 years of age, what happens to the status of them as a child reversionary beneficiary? Does it need to be updated? Please provide copy explaining.
Static Toast Callout
										

											

											

												

													
												

												

													

														

															
														

														
Children as beneficiaries

													

													

														
A child is a person under 25 years of age. If the child becomes older than 25 years of age, what happens to the status of them as a child reversionary beneficiary? Does it need to be updated? Please provide copy explaining.