NotificationBadge

Unread notification count badge. Uses blocks Badge primitive. Renders nothing when count is 0.

01 Usage

Basic

Notifications 3

<script lang="ts">
  import { NotificationBadge } from '@urbicon-ui/auth';
  import { Button } from '@urbicon-ui/blocks';

  let count = $state(3);
  let lastClick = $state<number | null>(null);
</script>

<div class="flex items-center gap-6">
  <div class="relative">
    <span class="text-text-secondary text-sm">Notifications</span>
    <!-- Bewusst kein `alert()`: Das Beispiel läuft auch außerhalb der
         Doku-Seite (Landing-Hero), und ein Browser-Dialog blockiert dort alles
         andere. Die Rückmeldung steht daneben. -->
    <NotificationBadge {count} onclick={() => (lastClick = count)} />
  </div>

  {#if lastClick !== null}
    <span class="text-text-tertiary text-sm" role="status">{lastClick} unread</span>
  {/if}

  <div class="flex gap-2">
    <Button size="sm" variant="outlined" intent="neutral" onclick={() => count++}>+1</Button>
    <Button
      size="sm"
      variant="outlined"
      intent="neutral"
      onclick={() => (count = Math.max(0, count - 1))}>-1</Button
    >
    <Button size="sm" variant="ghost" intent="neutral" onclick={() => (count = 0)}>Clear</Button>
  </div>
</div>

02 Accessibility

Nothing is rendered at zero

The badge only exists while count > 0. It leaves no empty element and no focusable stop behind, so tabbing past a quiet bell does not hit a control that announces nothing.

It is always a button, even without a handler

The component passes interactive to blocks' Badge unconditionally, so the badge always takes role="button" and tabindex="0" — but onclick is optional, and the key handler only fires when one was given. A badge rendered without a handler is therefore a focusable stop that announces as a button and does nothing on Enter or Space. Pass an onclick, or wrap the count in your own control rather than leaving the badge to stand alone.

The accessible name is only the number

The badge's entire content is 3 or 99+, and its props do not accept an aria-label — so on its own it announces a number with no noun. Give the surrounding control the name instead: label the bell button "Notifications" and let the badge supply the count inside it.

03 API Reference

4 props 1 required

Prop	Type	Default	Description
`count` required	`number`	—	Number of unread notifications. Badge hidden when 0.
`class`	`string`	—	Extra classes on the root element.
`onclick`	`() => void`	—	Click handler (e.g. toggle notification center).
`unstyled`	`boolean`	—	Strip all default styling.

04 Types

Local type definitions used by this component.

1 types

Only referenced

	Name	Kind	Category	Used by	Description
	NotificationBadgeProps	interface	props	0	—

05 Installation

Import

import { NotificationBadge } from '@urbicon-ui/auth';

llm.txt