Skip to content

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

Free

Cart Button Button Group for Solid

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

UI library: Ark UI

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 Solid, Ark UI does not update the count when the cart changes.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div class="flex flex-col gap-4">
    <ButtonGroup aria-label="Cart">
      <Button class="relative" size="sm" variant="outline">
        <ShoppingCartIcon aria-hidden="true" data-icon="inline-start" />
        Cart
        <Badge class="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" class="relative" size="icon-sm" variant="outline">
        <ShoppingCartIcon aria-hidden="true" />
        <Badge class="absolute -end-2 -top-1 text-xs" pill size="sm">
          5
        </Badge>
      </Button>
      <ButtonGroupText class="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