Notification Badge
Notification Badge
Wraps any element and overlays a count badge in its top-right corner. Supports numeric counts, dot mode, three colour variants, and a max-count truncation.
Basic
Wrap any element — icon button, avatar, or custom markup — and set Count to show the badge.
3
12
Colour Variants
Three variants: Destructive (red, default), Primary (brand), and Success (green).
5
Destructive
5
Primary
5
Success
Dot Mode
Dot=true shows a small indicator without a number — useful for "has unread" signals where the exact count isn't important.
JP
Max Count Truncation
Counts above Max are shown as "99+" by default. Override Max to change the threshold.
42
42
99+
100 → 99+
9+
Max=9 → 9+
Show Zero
By default the badge hides when Count is zero. ShowZero=true keeps it visible.
Hidden (default)
0
ShowZero=true
API Reference
NotificationBadge parameters.
| Prop | Type | Default | Description |
|---|---|---|---|
| Count | int | 0 | Count to display. Hidden when zero unless ShowZero is true. |
| Max | int | 99 | Counts above this threshold show as "99+". |
| ShowZero | bool | false | Show the badge even when Count is zero. |
| Dot | bool | false | Render a small dot indicator instead of a numeric count. |
| Variant | NotificationBadgeVariant | Destructive | Badge colour: Destructive (red), Primary (brand), or Success (green). |
| BadgeClass | string? | — | Additional CSS classes on the badge chip itself. |
| ChildContent | RenderFragment? | — | The element to wrap (icon button, avatar, etc.). |