Toast
The Toast component provides short, non-intrusive notifications that appear temporarily to deliver messages, confirmations, or alerts without disrupting the user's workflow.
Introduction
Toasts are lightweight, auto-dismissable messages that appear briefly on the screen to provide feedback or updates. They are often used to inform users about actions, confirmations, or errors while maintaining the flow of interaction.
Visual representation
The following elements are a visual representation of the toast component in use with non-intrusive notifications that appear temporarily notifications.
This component depends on the use of JavaScript when you want to use dismiss functionality. The structure of code defined will work out-of-box if the bundled JavaScript library of AEGov-Design-System is utilized.
Using this JavaScript library is not mandatory. You may choose your preferred library as well, however you are required to style the component as per the example provided.
Code structure
This is the basic code structure of how an popover component has be created. div labelled with ` aegov-toast ` will add the necessary styles.
idAttribute: Each toast notification should have a unique id to identify it. This allows JavaScript or other scripts to target specific toasts for actions like dismissal.data-dismiss-targetAttribute: This attribute is used to specify which toast element should be dismissed when the close button is clicked. The value ofdata-dismiss-targetshould match the id of the toast container.
<div id="toast-message-cta" class="w-full max-w-xs aegov-toast relative z-10" role="alert">
<div class="flex items-start">
<div class="toast-icon text-primary-600">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
</div>
<div class="toast-body">
<span class="mb-1 text-base font-semibold text-aeblack-900">...Title...</span>
<div class="mb-2 font-normal">...Text message...</div>
<a href="" class="aegov-btn btn-xs">...Button Text...</a>
</div>
<button type="button" class="toast-dismiss" data-dismiss-target="#toast-message-cta"
aria-label="Close">
<span class="sr-only">Close</span>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg>
</button>
</div>
</div>
The Toast component consists of the following key elements:
- Container (div with
role="alert") - The outer wrapper that holds the toast content. - Icon (
toast-icon) - An optional visual indicator representing the type of message (e.g., success, error, info). - Message Body (
toast-body) - Contains the text message with an optional title. - Action Button (Optional) - Allows users to respond to the toast, such as replying or undoing an action.
- Close Button (
toast-dismiss) - Enables users to manually dismiss the toast.
Variations
Toasts can be tailored to fit different use cases while maintaining consistency. The default toast includes an icon, a title, a description, and an optional action button. However, you can modify the structure based on your requirements, such as using only an icon and title, adding additional actions, or displaying the toast without an icon.
Default Toast
The default toast consists of an icon, a title, a description, and an optional action button. It provides a simple way to display short, non-intrusive notifications to users.
This is a sample toast. except close icon you can modify it as per your requirements by adding or removing elements like icons, titles, descriptions, and buttons.
Behaviour
Toasts are designed to deliver brief and contextual notifications without interrupting the user experience. They typically appear temporarily and dismiss automatically or allow manual dismissal through a close button. Depending on the implementation, toasts can:
- Appear automatically when triggered by an event.
- Require user action to dismiss, using a close button or interaction.
- Stay persistent until dismissed, if necessary for critical messages.
Accessibility
The Toast component includes accessibility features such as:
role="alert"to announce the toast message to screen readers.- Keyboard Navigation - The close button is keyboard-focusable, allowing users to dismiss the toast with the
EnterorSpace. - Use semantic HTML elements such as
<div>for the overall container and<p>for toast content to provide meaningful structure to assistive technologies. - Screen Reader Support - The toast content is read aloud when it appears, ensuring visibility for users with visual impairments.
By adhering to accessibility best practices, you can create an inclusive and user-friendly component that caters to all users, including those with disabilities.
RTL support
This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.
The following is an example of this component with text in Arabic.
All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.
The typography guidelines will also provide further information on use of the font stack for the Arabic language.
Usage
Toasts provide brief, non-intrusive notifications to users, typically as feedback for an action they performed. They appear temporarily and automatically disappear after a short duration or can be dismissed manually.
Toasts should be used to convey essential, time-sensitive messages without disrupting the user's workflow. They are ideal for confirming actions, displaying system status updates, or providing contextual information.
The content of the toast should be concise and relevant to the user's action. While they are often used after an action is completed, they can also serve as prompts or reminders for important updates.
Where to use an Toast?
Here are common use cases where an toast would be appropriate.
- Notifications - To inform users of successful actions, errors, or updates.
- User Feedback - To confirm actions like form submissions or saving changes.
- Reminders - For short messages that do not require a full modal or alert.
Spacing
Spacing is an essential feature of the design system. Learn more about spacing in our guidelines. The following rules are applicable towards toast.
- Always maintain a vertical and horizontal padding of
1 remon the toast container. - Always keep border and shadow on the toast container, changing color of border and shadow is accepted.
- There should be no content below the icon.
