Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Badges

Cart Button Button Group for React

A cart button with an item count badge on its corner, grouped with the cart total or the number of items.

Framework
UI library

The cart control in a store header. A small round Badge sits on the button's top corner with the item count, and ButtonGroupText beside it shows the total, $127.50, or the count in words. The second row is the icon-only version, named with an aria-label.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the badge sit on the corner?

The Button has relative, and the Badge has absolute -end-2 -top-1. The badge is pill with size="sm", a small round count. -end-2 follows the reading direction, so it moves to the left corner in a right-to-left layout.

What is ButtonGroupText?

A non-interactive part of the group that shares its border, used here for $127.50 and 5 items. It's text, not a button, so it doesn't take focus.

How is the icon-only cart button named?

It has aria-label="Cart, 5 items", which replaces the badge's 5 as the button's name. The first button is read as Cart and 3.

Are the counts live?

No. 3, 5 and $127.50 are written into the file. Pass your cart's count and total as the badge's and the text's children, and keep the aria-label in step.

What does the cart button open?

Nothing in the demo. Usually it opens a cart drawer or links to the cart page. Attach that to the Button.

Should the badge show 0?

Most stores hide it when the cart is empty. Render the Badge only when the count is above zero.

All 39 button group examples