System Pop-ups

System Pop-Ups are short, high-visibility notification elements used to deliver immediate feedback about system events, actions, or statuses. They appear as temporary, non-blocking overlays (toast-like messages) and help users quickly understand the result of their interaction. System Pop-Ups use color-coded visual language to clearly communicate the type and urgency of the message.

Component Types

System Pop-Ups come in four semantic variants, each corresponding to a specific type of system feedback.

Error

Success

Warning

Info

Variant Details

Each variant has specific use cases and visual characteristics.

1. Error (Red)

Indicates a critical issue, failed action, or system error
Uses the system's red color token
Communicates that an action couldn't be completed
Should be used sparingly to maintain impact
Typical use cases: failed form submission, server errors, invalid inputs

2. Success (Green)

Confirms that an action has been successfully completed
Uses the green accent color
Reinforces positive outcomes
Supports short messages that acknowledge user actions
Typical use cases: saved changes, completed updates, successful transactions

3. Warning (Yellow)

Informs users about potentially risky actions, limited states, or situations requiring attention
Uses the system's yellow color token
Notifies without blocking workflow
Should encourage the user to review or reconsider
Typical use cases: unsaved changes, incomplete settings, expiring items

4. Information (Blue)

Provides neutral informational messages that are useful but not urgent
Uses the system's blue color token
Ideal for contextual explanations or system notifications
Non-intrusive and used for general updates
Typical use cases: new feature highlights, system messages, lightweight notifications

Structure & Visual Elements

A typical System Pop-Up includes specific visual elements and follows a consistent layout structure.

A typical System Pop-Up includes:

Icon - communicates the semantic type (error, success, warning, info)
Title - a short, clear summary
Message text - a brief description or action result
Action buttons - primary and secondary actions (Delete/Cancel or Label/Cancel)

All variants share the same layout structure, while colors and icons change according to the semantic type.

States & Behavior

System Pop-Ups have specific appearance and interaction behaviors.

Appearance

Pop-Ups appear with a short fade or slide animation
They are always positioned in a consistent location (centered)
Background overlay dims the interface behind the dialog

Interactivity

Blocking: users can't continue interacting with the interface until manually closed
The action buttons immediately execute their respective actions and close the pop-up
Clicking outside the dialog (on overlay) can close the dialog (depending on implementation)

Accessibility

Supports screen-reader announcements
Includes proper ARIA roles (alert / status depending on type)
Keyboard navigation support (Escape to close)
Focus management for keyboard users

Usage Guidelines

Best practices for using System Pop-Ups effectively.

Keep messages short and actionable
Use only one pop-up per event to avoid overwhelming the user
Match the message type strictly to the semantic purpose (don't use success for neutral updates)
Avoid overusing warnings and errors; prioritize clarity and calm UX
For longer explanations or confirmations, use modal dialogs instead
Use error dialogs sparingly to maintain their impact and urgency
Success dialogs should provide clear confirmation of completed actions
Warning dialogs should encourage review without blocking workflow unnecessarily