React Button Group - Notifications Button
A button with notification badge overlay displaying unread counts for alert systems
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Notification counts demand immediate attention—badges on buttons provide visual urgency. This React component combines shadcn/ui's Button, ButtonGroup, and Badge components with Lucide React's BellIcon for notification controls with absolute-positioned count overlays. Built on Radix UI with destructive variant badges using -top-1 -right-2 absolute positioning and rounded-full styling for circular count indicators, the pattern delivers alert buttons with prominent numeric feedback. Perfect for messaging applications displaying unread message counts, notification centers showing pending alerts, social platforms indicating new activity, or any interface where numeric counts should overlay action buttons prominently—badges communicate urgency, absolute positioning ensures visibility, destructive variant signals critical counts.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-1.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-1.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-1.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-1.jsonRelated patterns you will also like
Cart Button
Shopping cart with badge counts
Messages and Followers
Communication badge patterns
Destructive Badge
Urgent count indicators
Outline Button
Border-style button variant
Circular Badge
Round count badges
Basic Button Group
Simple grouped buttons