Skip to main content Skip to navigation Skip to search

Alerts are banners that draw the user's attention to an important message. Elements of an alert, such as icons and color, indicate the type and urgency of the message's information.

Usage

Use alerts to grab the user’s attention to provide critical information needed in context.

Types

There are three types of alerts: standard, app level and lightweight.

Standard Alerts

Standard alerts are for use in the context of an application either in the content area itself or within components.

Your license is about to expire. This feature is still under development. You can customize your host in the setting panel.

App-Level Alerts

App-level alerts are for use in the global context of an application. Place them at the very top of all content and navigation.

Your license is about to expire. This feature is still under development. You can customize your VM in the Setting Panel.

Lightweight Alerts

Lightweight alerts are for use inside containers such as cards and layouts.

Your license is about the expire This feature is still under development You can customize your VM in the Setting Panel. Your container has been created. Uploading documents The host status is unknown

Standard Alerts

Standard alerts are for use in the context of an application either in the content area itself or within components.

Status

There are four different status of standard alerts: error, warning, info, and success.

Error

Reserved for warnings: a message that needs the user's attention and acknowledgment but might not cause errors.

Your license is about to expire. Renew

Warning

Reserved for warnings: a message that needs the user's attention and acknowledgment but might not cause errors.

This feature is still under development. View Roadmap

Info

Provides info to user’s in context. Be careful not to overuse to replace regular content.

You can customize your host in the setting panel.

Success

Reserved to provide a static persistent success message.

Your container has been created.

Alert group

In the case there are multiples of each sub-type, group them by sub-type and show by urgency. For example, show multiple errors before the first warning is.

Your license is about to expire. Renew The host CPU is running low. View host Warning This feature is still under development. For more information, visit the documentation or contact VMware support. Contact support You can customize your host in the setting panel. Your container has been created Acknowledge

Sizes

There are two sizes of standard alerts: default and compact. Use the compact alert only in places where vertical space is scarce, and information density is needed.

Info Compact info

Placement

Standard alerts are for use in the context of an application either in the content area itself or within components.

In Modals

Alerts can appear within modals. Clarity recommends that no more than one alert appears within a modal.

Delete File

The file “mockups.sketch” is currently open and cannot be deleted. Are you sure you want to delete the file “mockups.sketch”? Cancel Delete

In Cards

Clarity recommends using as concise language as possible. Additionally, Clarity recommends using a compact-size alert. The focus of the alert should be on its content, not on the alert appearing in it.

Use an alert at the very top of a card, on top of its title. An alert is meant to attract the attention of the user.

Using more than one alert within a card distracts the user and dilutes the importance of the alerts displayed.

Data might be outdated. Last update: 16 hours ago.
Memory
10.05 GB free
1.95 GB used | 11.99GB total
VIEW DETAILS

App-Level Alerts

Use app-level alerts in the global context of an application. Place them at the very top of all content and navigation.

Status

There are three different statuses of app-level alerts: error, warning, and error. App-level alerts follow the same urgency order as standard alerts: error, warning, and info.

Why no success app-level alert?

App-level alerts are global in nature. Reporting a success of an operation should either be communicated within context or as a notification message

Error

Reserved for malfunctions, as well as critical issues like license expiration.

Your license is about to expire. Renew

Warning

Reserved for messages that needs the user’s attention and acknowledgment but might not cause errors.

Upcoming maintenance on 10/30/2020 Edit

Info

Provides info to user’s in context. Be careful not to overuse to replace regular content.

New version available View

Placement

Place app-level alerts at the very top of the global context. Be careful not to place them in any other configuration.

Image that shows App level alert above the page header.

Lightweight Alerts

Use lightweight alerts to show important but not as urgent messages as standard and app-level alerts. Another use for a lightweight alert is to show the status or the result of an operation.

Status

There are six status sub-types of lightweight alerts: error, warning, info, success, loading, and unknown. Lightweight alerts fall into an order of importance, starting with the most important: error, warning, info, then success.

Error

Reserved for malfunctions, as well as critical issues such license expiration.

2 incompatible devices found. View devices

Warning

Reserved for messages that needs the user’s attention and acknowledgment but might not cause errors.

Some hosts will need remediation. Dismiss

Info

Provides info to user’s in context. Be careful not to overuse to replace regular content.

New release available. View Release Notes

Success

Reserved to provide to a static persistent success message.

Competibility check complete. Dismiss

Loading

Use the loading status to set the expectation that the action is in progress.

Finishing cluster setup... Show more

Unknown

When a status cannot be detected by the system, unknown is shown.

Unknown error. Dismiss

Alert group

In the case there are multiple of each sub-type, show one at a time and start with the highest urgency. Show all of a sub-type together before another type is displayed. For example, show all errors before the first warning is shown.

2 incompatible devices found. Actions 1 host incompatible. Acknowledge Some hosts will need remediation. Dismiss New release available. View Release Notes Compatibility check complete. Dismiss

Sizes

There are two sizes of lightweight alerts: default and compact. Use the compact alert only in places where vertical space is scarce, and information density is needed.

4 devices need to have their firmware compatibility verified manually. Compatibility check complete.
4 devices need to have their firmware compatibility verified manually. Compatibility check complete.

Placement

Lightweight alerts are used in the context of an application either in the content area or within a container.

In Containers

A lightweight alert can be used in containers like a card to save space while showing important information without too much visual styling.

Host_123

Host status

Compliant

VM Health

Healthy

Image compliance

2 of 16 hosts are out-of-compliance with the image

In Page

Lightweight alert can also be used in a page layout.