Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Cart Button Button Group for React

A Cart button with a badge of 3 beside $127.50, and an icon cart with a badge of 5 beside 5 items.

Two cart groups, and the numbers do not change. The first is a Cart button with a badge of 3, beside $127.50. The second is an icon button named Cart, 5 items, with a badge of 5, beside the text 5 items. Neither opens a cart.

Use it in a header where the total sits on the same control as the cart. A count with no total is a Badge on the button. In React, Base UI does not update the count when the cart changes.

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

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div className="flex flex-col gap-4">
  <ButtonGroup aria-label="Cart">
    <Button className="relative" size="sm" variant="outline">
      <ShoppingCartIcon aria-hidden="true" data-icon="inline-start" />
      Cart
      <Badge className="absolute -end-2 -top-1 text-xs" pill size="sm">
        3
      </Badge>
    </Button>
    <ButtonGroupText>$127.50</ButtonGroupText>
  </ButtonGroup>
  <ButtonGroup aria-label="Cart">
    <Button
      aria-label="Cart, 5 items"
      className="relative"
      size="icon-sm"
      variant="outline"
    >
      <ShoppingCartIcon aria-hidden="true" />
      <Badge className="absolute -end-2 -top-1 text-xs" pill size="sm">
        5
      </Badge>
    </Button>
    <ButtonGroupText className="font-medium">5 items</ButtonGroupText>
  </ButtonGroup>
</div>

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.

API Reference

Button Group

Sets aria-label="Cart". The rest is on the Button Group page.

Button

Sets size="sm", variant="outline", aria-label="Cart, 5 items" and size="icon-sm". The rest is on the Button page.

Badge

Sets pill and size="sm". The rest is on the Badge page.

All 39 button group examples