Summary
Create `` to implement the PatternFly v6 Notification badge component.
Icon button with a count badge, indicating unread or attention-requiring notifications.
Prior Art
| Source |
Element |
Status |
| PFE v4 |
-- |
-- |
| cem |
-- |
-- |
| cockpit |
-- |
-- |
| chickadee |
-- |
-- |
| Red Hat |
`` |
Related |
Requirements
- MUST implement PFv6 visual designs
- MUST provide end-user feature parity with `@patternfly/react-core` NotificationBadge
- MAY adjust element API to leverage web platform strengths
- SHOULD maintain CSS custom property theming compatibility
- SHOULD expose useful CSS shadow parts
Proposed API
<!-- Default -->
<pf-v6-notification-badge count="0"></pf-v6-notification-badge>
<!-- Variants -->
<pf-v6-notification-badge variant="read | unread | attention" count="5"></pf-v6-notification-badge>
<!-- Expanded state (aria-expanded) -->
<pf-v6-notification-badge expanded count="10"></pf-v6-notification-badge>
Element-specific considerations
- React `variant`: `read`, `unread`, `attention` - drives color and icon
- React `count` - numeric badge; 0 may hide badge; map to `count` attribute
- React `isRead` (deprecated alias for `variant="read"`) - skip this alias
- React `onClick` - renders as a button; emit `click` natively
- `expanded` attribute sets `aria-expanded` via `ElementInternals` or reflected attribute - used when it toggles a notification drawer
- `aria-label` required for screen readers (e.g. "10 unread notifications")
- Integrates with `` as its trigger
Checklist
Implementation
Demos
Tests
Reviews
Ship
Summary
Create `` to implement the PatternFly v6 Notification badge component.
Icon button with a count badge, indicating unread or attention-requiring notifications.
Prior Art
Requirements
Proposed API
Element-specific considerations
Checklist
Implementation
Demos
Tests
Reviews
Ship