<baht-notification-bell>

Header bell: an icon button with the unread count and a panel listing notifications. Opening emits baht-open; picking one emits baht-select with { id }; “Mark all read” emits baht-mark-all. Escape and an outside click close it.

Basic

HTMLReactAngular

Copy

<baht-notification-bell></baht-notification-bell>

<script>
  const el = document.querySelector('baht-notification-bell');
  el.items = [
    {
      "id": 1,
      "title": "New task",
      "body": "inc-12 · Triage",
      "time": "14:40",
      "unread": true
    },
    {
      "id": 2,
      "title": "Completed",
      "body": "ritm-8",
      "time": "13:02"
    }
  ];
</script>

Props

Name	Type	Default	Description
itemsJS	NotificationItem[]	[]	{ id, title, body?, time?, unread? }
count	number | null	null	Badge number; defaults to the unread items
label	string	'Notifications'	Accessible name and panel title
empty-message	string	'Nothing yet.'