Notification Badge

1<NotificationBadge count={3}>
2  <Button variant="outline" size="icon" aria-label="Mail">
3    <Mail className="h-5 w-5" />
4  </Button>
5</NotificationBadge>
6
7<NotificationBadge count={25}>
8  <Button variant="outline" size="icon" aria-label="Shopping cart">
9    <ShoppingCart className="h-5 w-5" />
10  </Button>
11</NotificationBadge>
12
13<NotificationBadge count={150} max={99}>
14  <Button variant="outline" size="icon" aria-label="Messages">
15    <MessageSquare className="h-5 w-5" />
16  </Button>
17</NotificationBadge>

1<NotificationBadge count={3} variant="primary">
2  <Button variant="outline" size="icon" aria-label="Primary notifications">
3    <Bell className="h-5 w-5" />
4  </Button>
5</NotificationBadge>
6
7<NotificationBadge count={5} variant="destructive">
8  <Button variant="outline" size="icon" aria-label="Urgent notifications">
9    <Bell className="h-5 w-5" />
10  </Button>
11</NotificationBadge>
12
13<NotificationBadge count={2} variant="success">
14  <Button variant="outline" size="icon" aria-label="Success notifications">
15    <Bell className="h-5 w-5" />
16  </Button>
17</NotificationBadge>
18
19<NotificationBadge count={7} variant="warning">
20  <Button variant="outline" size="icon" aria-label="Warning notifications">
21    <Bell className="h-5 w-5" />
22  </Button>
23</NotificationBadge>

1<NotificationBadge count={5} position="top-right">
2  <div className="h-12 w-12 border" />
3</NotificationBadge>
4
5<NotificationBadge count={5} position="top-left">
6  <div className="h-12 w-12 border" />
7</NotificationBadge>
8
9<NotificationBadge count={5} position="bottom-right">
10  <div className="h-12 w-12 border" />
11</NotificationBadge>
12
13<NotificationBadge count={5} position="bottom-left">
14  <div className="h-12 w-12 border" />
15</NotificationBadge>

1<NotificationBadge dot variant="primary">
2  <Avatar>
3    <AvatarImage src="..." />
4    <AvatarFallback>CN</AvatarFallback>
5  </Avatar>
6</NotificationBadge>
7
8<NotificationBadge dot variant="success">
9  <Button variant="outline">&gt; STATUS</Button>
10</NotificationBadge>

1<NotificationBadge count={5} size="sm">
2  <Button size="sm">&gt; SMALL</Button>
3</NotificationBadge>
4
5<NotificationBadge count={5} size="md">
6  <Button>&gt; MEDIUM</Button>
7</NotificationBadge>
8
9<NotificationBadge count={5} size="lg">
10  <Button size="lg">&gt; LARGE</Button>
11</NotificationBadge>

1<NotificationBadge count={3} pulse>
2  <Button variant="outline" size="icon" aria-label="Notifications with pulse">
3    <Bell className="h-5 w-5" />
4  </Button>
5</NotificationBadge>
6
7<NotificationBadge dot variant="destructive" pulse>
8  <Button variant="outline" size="icon" aria-label="Mail with pulse">
9    <Mail className="h-5 w-5" />
10  </Button>
11</NotificationBadge>

1// Shows "0"
2<NotificationBadge count={0} showZero>
3  <Button variant="outline" size="icon" aria-label="Notifications showing zero">
4    <Bell className="h-5 w-5" />
5  </Button>
6</NotificationBadge>
7
8// Hidden when count is 0
9<NotificationBadge count={0}>
10  <Button variant="outline" size="icon" aria-label="Mail hidden when zero">
11    <Mail className="h-5 w-5" />
12  </Button>
13</NotificationBadge>

1<NotificationBadge count={5} offset={{ x: 5, y: -5 }}>
2  <Button variant="outline">&gt; CUSTOM POSITION</Button>
3</NotificationBadge>