# EuiNotificationsComponent

**Type:** component



Notifications panel component that displays a dropdown list of user notifications with badge counter.
Provides a comprehensive notification center with filtering, marking as read/unread, and action buttons.
Supports customizable labels, date formatting, and unread count display with badge indicator.
Integrates with overlay component for dropdown panel behavior and manages notification state.
Emits events for all user interactions including item clicks, refresh, settings, and mark as read actions.

```html
<eui-app>
  <eui-app-toolbar>
    <eui-toolbar>
      <eui-toolbar-items euiPositionRight>
        <eui-toolbar-item-notifications>
          <eui-notifications
            [count]="notificationItems.length"
            [items]="notificationItems"
            (itemClick)="onItemClick($event)"
            (markAllAsReadClick)="onMarkAllAsRead()"
            (refreshClick)="onRefresh()">
          </eui-notifications>
        </eui-toolbar-item-notifications>
      </eui-toolbar-items>
    </eui-toolbar>
  </eui-app-toolbar>
</eui-app>
```
```typescript
notificationItems = [
  { id: '1', label: 'New message', metadata: { read: false, date: new Date() } },
  { id: '2', label: 'Task completed', metadata: { read: true, date: new Date() } }
];
```

### Accessibility
- Bell icon button keyboard accessible
- Badge displays notification count for screen readers
- Dropdown panel keyboard navigable
- Each notification item is focusable
- ARIA labels for notification count
- Mark as read actions keyboard accessible

### Notes
- Typically used within eui-toolbar-item-notifications
- Positioned in toolbar right section
- Badge shows count or unread count
- Dropdown panel with overlay behavior
- Items array uses UxLinkLegacy<NotificationMetadata> interface
- Metadata includes read status and date
- Automatic unread count calculation when customUnreadCount is false
- All labels customizable or use default translations
- dateFormat for timestamp display (default: 'dd/MM/YYYY')
- Multiple action buttons: refresh, settings, mark all as read
- View all button in footer (optional)
- Empty state when no notifications
- Panel auto-closes on view all (configurable)
- Supports grouping by date (today vs older)


**Selector:** `eui-notifications`

## Inputs
- **count**: `number` - Total count of notifications displayed in the badge. When null, badge shows unread count instead. When provided, overrides automatic counting. Optional.
- **customUnreadCount**: `boolean` - Uses custom unread count from nbUnreadCount input instead of automatic calculation. When true, disables automatic counting of unread notifications from items array.
- **dateFormat**: `string` - Date format string for displaying notification timestamps. Accepts any valid date format pattern.
- **headerTitleLabel**: `string` - Custom label text for panel header title. 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<NotificationMetadata> 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.
- **nbUnreadCount**: `number` - Number of unread notifications to display in the badge. When null and customUnreadCount is false, automatically calculated from items array. 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.
- **unreadLabel**: `string` - Custom label text for "unread" status indicator. When null, uses default translation key. Optional.
- **viewAllNotificationsLabel**: `string` - Custom label text for "view all notifications" button. When null, uses default translation key. Optional.

## Outputs
- **itemClick**: `EventEmitter<UxLinkLegacy<NotificationMetadata>>` - Emitted when a notification item is clicked. Payload: UxLinkLegacy<NotificationMetadata> - the clicked notification item Triggered when user clicks on any notification item in the list.
- **itemMarkAsReadClick**: `EventEmitter<UxLinkLegacy<NotificationMetadata>>` - Emitted when the mark as read button on a notification item is clicked. Payload: UxLinkLegacy<NotificationMetadata> - 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<void>` - Emitted when the notifications bell icon is clicked to toggle the panel. Payload: void Triggered when user clicks the main notifications button to open/close the dropdown.
- **refreshClick**: `EventEmitter<void>` - Emitted when the refresh button is clicked to reload notifications. Payload: void Triggered when user clicks the refresh button in the notifications panel header.
- **settingsClick**: `EventEmitter<MouseEvent>` - Emitted when the settings button is clicked. Payload: MouseEvent - the click event Triggered when user clicks the settings button in the notifications panel header.
- **viewAllClick**: `EventEmitter<void>` - Emitted when the "View All" button is clicked. Payload: void Triggered when user clicks the view all notifications action button.