Components
Notification Badge
BetaA small count bubble or dot overlaid on an icon to signal unread or pending items. Used for wishlist counts, saved trips, and basket item counts in navigation.
Purpose
The NotificationBadge overlays a small count or dot indicator on any trigger icon to signal pending or unread items — without interrupting the user's current task.
It appears in the navigation bar to show:
- Wishlist — number of saved holiday cards
- Saved trips — number of itineraries the user has bookmarked
- Basket — number of items in the travel basket
The badge uses Kuoni Yellow (#F5C518) as its background with dark text — providing the highest contrast against both the white nav bar and teal-tinted surfaces without relying on red (which is reserved for error and danger states).
The count badge hides automatically when count === 0 or count is not provided. The dot variant is always visible when rendered.
Usage
Use NotificationBadge to overlay a count or dot on an icon trigger when you need to signal pending items without interrupting the user — it is a passive indicator, not an interactive control itself. If the underlying status is about a single item rather than a count of items (e.g. "Confirmed", "Cancelled"), use Pill or Badge instead.
It typically appears in the site NavBar, anchored to icon buttons for wishlist, saved trips, or basket.
Anatomy
- 1Trigger slot — Any ReactNode (typically an icon button). The badge is positioned absolute top-right of this element.
- 2Badge bubble — Small rounded-full pill in Kuoni Yellow. 18 px minimum dimension; expands horizontally for multi-digit counts.
- 3Count label — Number in 10 px semibold dark text. Shows "99+" when count exceeds max.
- 4Dot variant — 10 px filled circle. No number — signals new activity without a specific count.
Variants
Count badge
Displays an exact number. Hides when count is 0 or undefined.
99+ cap
When count exceeds max (default 99), the badge shows 99+.
Dot variant
No number — signals new activity without revealing the count.
Hidden when empty
When count is 0 or not provided, no badge renders. This prevents a yellow bubble appearing on empty wishlists.
Best practices
Use the count variant when the exact number helps the user — wishlist size, basket items.
A count of 3 on the wishlist icon tells users exactly how many items they have saved.
Use a red or danger-coloured badge for counts that are not errors or alerts.
A red danger badge on a wishlist icon implies something is wrong — wishlist count is not a warning.
Use the dot variant when you know there is new activity but do not have an exact count.
The dot signals new activity (a new message, a price drop) without requiring an exact count from the API.
Keep the dot visible indefinitely after the user has acknowledged the notification.
A dot that never goes away becomes invisible — users stop seeing it after a few sessions.
Wrap the exact element the badge should anchor to — usually just the icon, not a wider container.
Wrap the icon button in NotificationBadge so the badge is positionally anchored to the icon, not the label.
Wrap an excessively large container — the badge will appear at the top-right corner of the wrapper.
Wrapping a large nav section in NotificationBadge places the badge in the wrong corner.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | The trigger element the badge overlays. Typically an icon or icon button. |
| count | number | — | The number to display. Badge is hidden when count is 0 or undefined. |
| variant | 'count' | 'dot' | 'count' | count shows a number; dot shows a small filled circle with no number. |
| max | number | 99 | Maximum number to display. Counts above this show as max+. |
| className | string | — | Additional Tailwind classes on the root wrapper span. |
Accessibility
aria-label on the badge
The yellow bubble itself has an aria-label that announces the count:
<span aria-label="3 notifications">3</span>
For the dot variant, the label is "New" — indicating new activity without a count.
Trigger element
The trigger element (icon button) should have its own aria-label that describes the total context:
<NotificationBadge count={3}>
<button aria-label="Wishlist — 3 saved holidays">
<HeartIcon />
</button>
</NotificationBadge>
Including the count in the button's aria-label provides a complete accessible name without requiring screen readers to piece together the button name and the badge label separately.
Keyboard interaction
The NotificationBadge is a display-only wrapper. All keyboard interaction is handled by the wrapped trigger element.