UAsk EN

Alert

The Alert component is a versatile element that provides users with important messages, notifications, and feedback. It serves as a prominent way to communicate information in a visually striking manner.

Introduction

The component is designed to deliver essential information to users in a visually impactful manner. It plays a crucial role in alerting users about important updates, warnings, errors, or successful operations.

With its ability to be easily customized, developers can choose from different variations to suit specific use cases. Whether it's a standard alert, an alert with an icon, a link, or additional content, the alert component ensures that critical information is effectively conveyed to users.

It is a flexibile feature, making it an indispensable tool for enhancing user experience and accessiblity across various applications and websites.

Visual representation

The following elements are a visual representation of the alert component in use with different styles that identify a notification, an error, a success and a warning.

Code structure

The ` .aegov-alert ` class represents the alert component with the ` .alert-error ` class indicating it's type.

<div role="alert" class="aegov-alert alert-error">
	<div class="alert-content">
		<p>The conference starts at 10:00 AM in Hall B. Don't be late!</p>
	</div>
</div>
Class Properties
.alert-info Applies the techblue color combination.
.alert-error Applies the aered color combination.
.alert-success Applies the aegreen color combination.
.alert-warning Applies the camel color combination.

Please refer to the colour system guideline for more information regarding the UAE Design System colour variations.

Variations

Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.

Variations of these alerts are suggestions and you may choose to display what is appropriate for the context of the alert.

Alert with icon

This variation includes an icon along with the text, providing visual cues to the nature of the message. It is recommended to use an icon based variation in most cases.

Alert with icon and link

The component includes a link towards the end that can indicate a further action for the user in reletiveness to the alert. By default, the link is attached with an arrow icon, providing users with the cue to click on the link for more information.

Alert with list

Relevant information and context about the information you present to the use is very useful. Aim to provide further information to the user in the form of bullet's when possible.

Alert with additional content

Use this example to create an alert with additional content, such as a title, description, and footer.

This variation is very useful when you want to provide context related to the alert generated and you need the user to take actions that are suitable.

Dismissing an alert

Provide the use with the ablity to dismiss an alert if the alert is temporary. This can help the use acknowledge the alert too.

This component depends on Javascript

This component depends on the use of JavaScript. 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.

Behaviour

The alert component serves as a crucial element in providing important information, notifications, or warnings to users. To ensure optimal user experience, it is essential to define its behavior thoughtfully. The primary behavior considerations for the alert component are:

  • Consistency: Maintain consistency in the appearance and behavior of alerts throughout the application. Users should be able to quickly identify the purpose of an alert based on it's design and behavior.
  • Avoid overuse: Alerts should be used judiciously. Overusing them may desensitize users, leading them to ignore important alerts. Reserve alerts for critical information and actions.
  • Dismissal: Creating dismissible alerts is recommended. Dismissable alerts allow users to close or hide them once they have read the content. A clear and easily identifiable "close" button or icon should be provided for this purpose.

Accessibility

Making the alert component accessible is crucial to ensure inclusivity and allow users of all abilities to comprehend and interact with the alerts effectively. Here are some accessibility considerations for the alert component:

  • Implement appropriate ARIA roles and attributes to identify the alert's purpose and state to assistive technologies. You must use the ` role="alert" ` to indicate that the element represents an alert.
  • When using an alert with an icon, you must make sure that the ` aria-hidden="true" ` attribute is added to the SVG icon.
  • Use semantic HTML elements such as <div> for the overall container and <p> for alert content to provide meaningful structure to assistive technologies.
  • Ensure that users can interact with the alert using only the keyboard. All interactive elements within the alert, such as the close button, should be focusable and operable using the "Enter" or "Space" keys.
  • Manage focus appropriately to ensure that the keyboard focus is directed to the alert when it appears and returns to the expected location once the alert is dismissed.
  • Test the alert with screen readers to verify that the content and dismiss buttons are announced correctly, and users can understand the context and purpose of the alert.
  • When using the dismissable alert variation, ensure you add the ` aria-label="Close" ` attribute to the icon that represents the dismissble trigger.

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

We recommend that alerts and message be used as visual feedback for a user. It must be the information provided back to the user once a certain action is completed or before the user takes a certain action.

The nature of the feedback must define the state of the alert message

In some cases, you may want to display the alert or message (especially a warning or an information) before the user takes an action - generally indicating a predictive behaviour.

Where to use an alert?

Here are common use cases where an alert would be appropriate.

  • After a form has been submitted, and the result of the submission would define the state.
  • When a certain button is clicked, resulting in the need for a feedback.
  • After a state changes, such as after a login or logout state.
  • Before the user is able to take an action.

Spacing

Spacing is an essential feature of the design system. Learn more about spacing in our guidelines. The following rules are applicable towards an alert.

  • Always maintin a vertical padding of 1 rem on the alert container.
  • Always maintin a horizontal padding of 1.5 rem on the alert container.
  • If you are using the variation of an alert with an icon, the spacing between the icon and the content must be 1 rem and there should be no content below the icon.
Previous
Accordion
Next
Avatar