Notification Bell
Header notification dropdown. Bell button with unread badge, dropdown panel with severity-tinted notification list, mark-all-read action, empty state.
With notifications
Click the bell to open the panel
Items render in severity-tinted rows. The bell shows an unread badge until OnMarkAllRead fires.
Unread: 3
razor
private List<NotificationBell.NotificationItem> _notifications = new()
{
new("1", "New patient registered", "Aiko Tanaka was added to your list.", "2 min ago", "success", false),
new("2", "Lab results ready", "3 documents ready for review.", "8 min ago", "info", false),
new("3", "Drug interaction", "Ibuprofen + warfarin flagged.", "1 hr ago", "warning", false),
};
<NotificationBell Items="_notifications"
OnItemClick="HandleClick"
OnMarkAllRead="HandleMarkAllRead">
<Footer>
<button type="button">View all notifications</button>
</Footer>
</NotificationBell>Empty state
When there are no notifications
Pass an empty array; the panel shows a friendly placeholder.
razor
<NotificationBell Items="@(Array.Empty<NotificationBell.NotificationItem>())" />