Notification UI component for Figma — 128 variants

Overview

The Notifications UI component in Emvi UI manages contextual and persistent user communication by grouping multiple events into a single, structured view. Unlike alerts or toasts, notifications are often displayed in side panels, modals, or dropdowns, offering more room for text, actions, and organization.

Notifications are particularly useful in SaaS apps, e-commerce, or collaborative platforms, where users need to quickly access updates related to their account, activity, or reminders.

Structure and Anatomy

Each notification includes:

- Header (e.g., "New message", "System update")
- Body text describing the event
- Contextual icon indicating type (success, error, warning, info)
- Quick actions such as buttons ("view more", "dismiss", "reply")
- Optional timestamp for chronological context

Notification Variants

- Contextual: displayed in dropdowns or side panels
- Persistent: remain visible until dismissed by the user
- Interactive: include quick-action buttons or links
- Grouped: multiple notifications shown within a tray or panel

Accessibility and Responsiveness

When implementing these Figma patterns:
- Choose role="status" or role="alert" according to message urgency
- Check contrast with the final theme colors
- Test keyboard navigation and dismissal
- Adapt the notification panel to narrow screens

Integration

In Figma, notifications ship as modular components with style variants (light/dark, type, with/without icons, with/without actions).

In Tailwind CSS, they are implemented using utilities like flex, items-start, gap-x-*, bg-*, shadow-md, rounded-lg, and animate-in/out.