NotificationFilterTabs

Domain

Pill-style filter tabs for a notification list. Includes count badges, active/inactive colors, and is accessible via role="tab" / aria-selected.

Default (with counts)

Preview
Code
<%- include('modules/domain/common/notification/NotificationFilterTabs', {
  tabs: [
    { id: 'all',      label: 'All',      count: 24 },
    { id: 'unread',   label: 'Unread',   count: 5  },
    { id: 'mentions', label: 'Mentions', count: 2  },
    { id: 'system',   label: 'System',   count: 17 },
  ],
  activeId: 'all'
}) %>

Active = Unread, no counts

Preview
Code
<%- include('modules/domain/common/notification/NotificationFilterTabs', {
  tabs: [
    { id: 'all',      label: 'All'      },
    { id: 'unread',   label: 'Unread'   },
    { id: 'archived', label: 'Archived' },
  ],
  activeId: 'unread'
}) %>
Source modules/domain/common/notification/NotificationFilterTabs.ejs