# EuiNotificationsV2Component

**Type:** component



Enhanced notifications panel component (v2) displaying a dropdown list of user notifications with advanced badge indicators.
Provides comprehensive notification center with unread count, new notifications since last check, and action buttons.
Supports customizable labels, date formatting, and multiple count displays with badge indicators.
Integrates with overlay component for dropdown panel behavior and manages notification state.
Emits events for all user interactions including item clicks, refresh, and mark as read actions.
Improved version with additional features compared to EuiNotificationsComponent.


**Selector:** `eui-notifications-v2`

## Inputs
- **count**: `number` - Total count of notifications displayed in the badge. When null, badge shows unread count instead. Optional.
- **dateFormat**: `string` - Date format string for displaying notification timestamps. Accepts any valid Angular DatePipe format pattern.
- **headerHideLabel**: `string` - Custom label text for hide/close button in header. When null, uses default translation key. Optional.
- **headerTitleLabel**: `string` - Custom label text for panel header title. When null, uses default translation key. Optional.
- **headerUnreadCountLabel**: `string` - Custom label text for displaying total unread count in header. When null, uses default translation key. Optional.
- **headerUnreadSinceLastCheckCountLabel**: `string` - Custom label text for displaying unread count since last check in header. When null, uses default translation key. Optional.
- **isHidePanelOnViewAllAction**: `boolean` - Automatically closes the notifications panel when "View All" is clicked. When false, panel remains open after clicking view all.
- **isShowMarkAllAsReadButton**: `boolean` - Shows the "Mark All as Read" button in the panel header. When false, hides the mark all as read functionality.
- **isShowMarkAsRead**: `boolean` - Shows the mark as read action button on individual notification items. When false, hides the mark as read functionality from notification items.
- **isShowRefreshButton**: `boolean` - Shows the refresh button in the panel header. When false, hides the refresh button.
- **isShowSettingsButton**: `boolean` - Shows the settings button in the panel header. When false, hides the settings button.
- **isShowViewAllAction**: `boolean` - Shows the "View All" action button in the panel footer. When false, hides the view all notifications button.
- **items**: `{}` - Array of notification items to display in the panel. Each item should conform to UxLinkLegacy interface with id, label, and metadata properties.
- **markAllAsReadLabel**: `string` - Custom label text for "mark all as read" button. When null, uses default translation key. Optional.
- **markAsReadLabel**: `string` - Custom label text for "mark as read" action. When null, uses default translation key. Optional.
- **markAsUnReadLabel**: `string` - Custom label text for "mark as unread" action. When null, uses default translation key. Optional.
- **noNotificationFoundLabel**: `string` - Custom label text for empty state message when no notifications exist. When null, uses default translation key. Optional.
- **noNotificationFoundLink**: `boolean` - Makes the "no notifications found" message clickable as a link. When true, emits noNotificationFoundClick event on click.
- **refreshLabel**: `string` - Custom label text for refresh button. When null, uses default translation key. Optional.
- **settingsLabel**: `string` - Custom label text for settings button. When null, uses default translation key. Optional.
- **totalLabel**: `string` - Custom label text for "total" count display. When null, uses default translation key. Optional.
- **unreadCount**: `number` - Number of unread notifications to display. Used for badge display and header information. Optional.
- **unreadLabel**: `string` - Custom label text for "unread" status indicator. When null, uses default translation key. Optional.
- **unreadSinceLastCheckCount**: `number` - Number of new unread notifications since user last checked the panel. Displays as a secondary indicator to highlight new activity. Optional.
- **viewAllNotificationsLabel**: `string` - Custom label text for "view all notifications" button. When null, uses default translation key. Optional.

## Outputs
- **itemClick**: `EventEmitter<UxLinkLegacy>` - Emitted when a notification item is clicked. Payload: UxLinkLegacy - the clicked notification item Triggered when user clicks on any notification item in the list.
- **itemMarkAsReadClick**: `EventEmitter<UxLinkLegacy>` - Emitted when the mark as read button on a notification item is clicked. Payload: UxLinkLegacy - the notification item to mark as read Triggered when user clicks the mark as read action on an individual notification.
- **markAllAsReadClick**: `EventEmitter<MouseEvent>` - Emitted when the "Mark All as Read" button is clicked. Payload: MouseEvent - the click event Triggered when user clicks the mark all as read button in the panel header.
- **noNotificationFoundClick**: `EventEmitter<void>` - Emitted when the "No notifications found" link is clicked. Payload: void Triggered when user clicks the no notifications message (when noNotificationFoundLink is true).
- **notificationsClick**: `EventEmitter<KeyboardEvent | MouseEvent>` - Emitted when the notifications bell icon is clicked to toggle the panel. Payload: KeyboardEvent | MouseEvent - the interaction event Triggered when user clicks or uses keyboard to open/close the dropdown.
- **refreshClick**: `EventEmitter<Event>` - Emitted when the refresh button is clicked to reload notifications. Payload: Event - the click event Triggered when user clicks the refresh button in the notifications panel header.
- **viewAllClick**: `EventEmitter<Event>` - Emitted when the "View All" button is clicked. Payload: Event - the click event Triggered when user clicks the view all notifications action button.
