Alert

Alerts and Toasts UI - Overview

Alerts and toasts in Emvi UI are components designed to deliver key user messages with clarity and efficiency. Alerts provide persistent, visible messages within the interface, while toasts act as temporary notifications that auto-dismiss.

Both components support multiple levels of severity: success, error, warning, info, and neutral. Each state uses consistent color tokens, iconography, and typography to ensure clear hierarchy and accessibility.

Alerts (Alert UI)

Alerts are inline message blocks meant for contextual, important communication. Common use cases include:

- Action confirmations
- Critical warnings (e.g., potential data loss)
- Form validation errors

Variants support icons, secondary action buttons, and dismissible options for user control.

Toasts (Toast UI)

Toasts provide quick, lightweight notifications that appear in fixed screen positions (top/bottom corners) and disappear automatically after a set delay. Ideal for:

- Quick confirmations ("File uploaded successfully")
- Temporary errors ("Connection lost, retrying...")
- Status updates

They support icons, undo actions, and stacked notifications for multiple simultaneous events.

Grabbing Attention

Alerts are designed to grab users' attention immediately. Whether it’s a critical warning, an important update, or a simple notification, alerts ensure that vital information doesn’t go unnoticed. By using distinct colors and prominent positioning, alerts stand out on the page, making sure users see them right away.

Providing Feedback

Alerts provide essential feedback to users regarding their actions on the site. Whether it's confirming a successful action, pointing out an error, or offering additional instructions, alerts keep users informed about what’s happening. This real-time feedback helps improve user experience by making interactions transparent and reassuring users that their actions are being processed.

Prompting Actions

Alerts are effective in prompting users to take specific actions or make informed decisions. They can include buttons or links that guide users to the next steps, such as resolving an issue, confirming a choice, or exploring further information. This functionality makes alerts not just informative but also actionable, driving user engagement and ensuring smooth navigation through the site.

Accessibility and Responsiveness

Both alerts and toasts comply with WCAG standards, offering proper color contrast, semantic roles (role="alert", role="status"), and screen reader compatibility.

They are fully responsive and optimized for mobile and web applications, adapting to screen sizes without losing readability or functionality.

Integration

In Figma, alerts and toasts exist as structured variants tied to global text and color styles.

In Tailwind CSS, they are implemented using utilities such as bg-success-100, text-error-700, rounded-md, shadow-lg, with support for custom entry/exit animations.

Best Practices

- Use alerts for persistent messages that require user attention
- Use toasts for transient notifications that don't require action
- Maintain consistent styling across all severity levels
- Ensure proper contrast ratios for accessibility
- Limit toast duration to 4-6 seconds for optimal user experience
- Provide clear dismiss options for alerts