Skip to main content

Documentation

NotificationBadge

Unread notification count indicator for bell icons and buttons

Tags: component notification badge counter

View Demo

Displays a count of unread notifications, typically used on a bell icon. Shows "99+" for counts over the maximum.

Import​

Notification components are available via a separate entry point to make @classic-homes/notifications an optional dependency.

<script>
  import { NotificationBadge } from '@classic-homes/theme-svelte/notifications';
</script>

Note: Using notification components requires @classic-homes/notifications to be installed.

Basic Usage​

<NotificationBadge count={5} />

Props​

Prop Type Default Description
count number required Number of unread notifications
max number 99 Maximum number to display (shows "N+" for more)
showZero boolean false Whether to show the badge when count is 0
size 'sm' | 'md' | 'lg' 'md' Size variant
children Snippet - Optional children (e.g., button or icon to wrap)
class string - Additional CSS classes

Sizes​

<NotificationBadge count={3} size="sm" />
<NotificationBadge count={3} size="md" />
<NotificationBadge count={3} size="lg" />
Size Badge Height Font Size
sm 16px (h-4) 10px
md 20px (h-5) 12px
lg 24px (h-6) 14px

Maximum Count​

When the count exceeds the max value, the badge displays the max with a plus sign:

<!-- Shows "99+" -->
<NotificationBadge count={150} max={99} />

<!-- Shows "50+" -->
<NotificationBadge count={75} max={50} />

Show Zero​

By default, the badge is hidden when count is 0. Use showZero to always display it:

<!-- Hidden when count is 0 -->
<NotificationBadge count={0} />

<!-- Visible even when count is 0 -->
<NotificationBadge count={0} showZero />

Custom Content​

Wrap custom content like buttons by providing children:

<NotificationBadge count={5}>
  {#snippet children()}
    <Button variant="ghost" size="icon">
      <Icon name="bell" />
    </Button>
  {/snippet}
</NotificationBadge>

Accessibility​

The component includes accessibility features:

  • Uses aria-label to announce the count to screen readers
  • Badge text is visually styled but accessible

Examples​

In a Header​

<header class="flex items-center gap-4">
  <NotificationBadge count={unreadCount}>
    {#snippet children()}
      <button
        class="p-2 rounded-full hover:bg-muted"
        onclick={openNotifications}
        aria-label="View notifications"
      >
        <Icon name="bell" size={24} />
      </button>
    {/snippet}
  </NotificationBadge>
</header>

Dynamic Updates​

<script>
  import { notificationStore } from '@classic-homes/notifications/svelte';

  const unreadCount = $derived(notificationStore.notifications.filter((n) => !n.read).length);
</script>

<NotificationBadge count={unreadCount} />
On this page