React Button Group - Cart Button
A shopping cart button with badge count and price display for e-commerce checkout controls
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Cart state needs constant visibility—badge counts and price displays guide purchase decisions. This React component combines shadcn/ui's Button, ButtonGroup, Badge, and ButtonGroupText components with Lucide React's ShoppingCartIcon for e-commerce controls with dual metrics. Built on Radix UI with absolute-positioned rounded-full badges for item counts and ButtonGroupText for price or item summaries, the pattern delivers cart buttons with comprehensive shopping context. Perfect for e-commerce headers showing cart totals, product listings with add-to-cart actions, checkout flows displaying order summaries, or any shopping interface where cart state should be immediately visible—badges communicate item quantity, text displays monetary value, groups unify cart information.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-badges-3.jsonRelated patterns you will also like
Notifications Button
Badge overlay patterns
Like with Count
Button with count display
Circular Badge
Round count badges
Outline Button
Border-style button variant
Basic Button Group
Simple grouped buttons
Dialog Component
Cart modal dialogs