Holistics Design System

Alert ​

Stable

A brief message that provides timely feedback, including confirmations, warnings, and errors.

Anatomy ​

Alert anatomy

  1. Icon and background color: these icons and colors are set to the default that matches the message type. For example, warning messages are yellow with an exclamation point icon.
  2. Title (optional): indicates the purpose of the message.
  3. Description: describes the issue and any action the person needs to take to resolve it, if applicable.
  4. Close button (optional): allows users to close the alert.
  5. Actions (optional): enables users to act on the message content. Can be one or more buttons and/or links.

Variants ​

Neutral

General information that doesn't require emphasis or urgency

Neutral alert

Info

Helpful context or tips that assist the user

Info alert

Success

Confirms a completed action

Success alert

Warning

Alerts users to potential issues that don't block their workflow. Use Warning when the user can still prevent a problem.

Warning alert

Error

Signals errors. Use Error when the outcome has already failed.

Error alert

Usage guidelines ​

When to use ​

Use alerts to:

  • Display temporary short messages (e.g. "Your changes will be saved and reflected in Reporting")
  • State actions performed by users (e.g. "Dashboard saved successfully")
  • Provide immediate feedback after form submissions (e.g. "Failed to save changes. Try again.")

Consider alternatives ​

Alerts are low-priority messages. Use higher-priority components when stronger attention or action is required.

  • For important messages that need to remain in the interface, use Banner instead.
  • For complex messages that require immediate action, use Modal instead.
  • For messages that require explicit user confirmation, use Modal or Confirmation popover instead.

For detailed guidance on selecting components for in-app messages, refer to In-app messages.

Best practices ​

Use alerts with caution ​

Avoid using alerts for critical information that requires immediate action. When you do use them, keep messages short.

Alerts can be difficult for users with low vision or limited dexterity to access because they:

  • Disappear automatically
  • Are difficult to reach with a keyboard
  • May appear outside the user's current focus area

Visibility ​

Alerts should be visible and noticeable, with the default placement at the top center of the viewport. When a modal is open, alerts should appear above it (higher z-index).

Do

Place the alert at the top-center of the viewport, above other content.

Do

Don't

Avoid placing alerts where they're easy to overlook.

Don't

Auto-dismiss ​

By default, alerts disappear after 5 seconds. The timer pauses when users hover over or focus on the alert, and resumes when they move away.

Error alerts don't auto-dismiss. They remain visible until the user manually dismisses them, so users have enough time to read and act on the error.

Do

Auto-dismiss non-critical alerts after 5 seconds, and pause the timer on hover or focus to allow users to read.

Do

Do

Keep error alerts visible until the user dismisses them.

Do

Avoid 'In progress' alerts ​

Do not display 'In progress' alerts, such as "Saving…" or "Creating object…".

These intermediate alerts provide little value and may stack with other alerts, creating unnecessary noise. Instead, only show alerts for meaningful outcomes, such as success or error states.

Do

Show alerts only for meaningful outcomes (e.g. success or error).

Do

Don't

Show "in progress" alerts (e.g. "Saving…", "Creating…").

Don't

Stacking ​

When multiple alerts appear, newer ones stack above older ones. Show up to 4 at a time. When the limit is reached, the oldest one disappears first.

Do

Stack newer alerts above older ones, limiting to 4 alerts.

Do

Don't

Display too many alerts at once without limits.

Don't

Use more than just color ​

To maximize accessibility, ensure the message is clear from its content alone. Icons can reinforce meaning, since color alone doesn't reliably distinguish alert types.

Do

Use clear, descriptive text, and reinforce meaning with icons alongside color.

Do

Don't

Rely on color alone or ambiguous text to convey alert meaning.

Don't

Content ​

Messages should be scannable at a glance and provide clear value to the user. The two most common variants are:

  • Success: confirms users have completed an action or task successfully
  • Error: alerts users when something has gone wrong and guides them toward resolution

For detailed content guidelines for each message type, refer to In-app messages.