Skip to content

Mini-cart drawer

Preview Available in release assets

Offer a progressively enhanced cart summary while retaining a durable full-cart destination and server-owned totals.

Server contract

Use dialog.thin-mini-cart with .thin-drawer. Keep cart lines, totals, and checkout links server-rendered.

Products, prices, inventory messages, variant choices, and cart actions remain server-authored links, forms, and content without optional enhancement.

Mini-cart drawer primary example

Show code
<p><a href="/cart"  data-dialog-open="mini-cart">Cart (2)</a></p>
<dialog class="thin-drawer thin-mini-cart" id="mini-cart" aria-labelledby="mini-cart-title">
  <header>
    <h2 id="mini-cart-title">Your cart</h2>
    <button class="thin-button" data-variant="quiet" data-icon-only type="button" data-dialog-close aria-label="Close cart">
      <svg aria-hidden="true" data-icon>
        <use href="/icons/sprite.svg#x">
        </use>
      </svg>
    </button>
  </header>
  <div data-panel-body>
    <ul class="thin-cart-items">
      <li>
        <img src="/products/tote-thumb.jpg" alt="">
        <div>
          <a href="/products/tote">Canvas tote</a>
          <p>Blue · Quantity 1</p>
          <p>$68.00</p>
        </div>
        <form action="/cart/items/tote/remove" method="post">
          <button class="thin-button" data-variant="quiet">Remove <span class="thin-visually-hidden">Canvas tote</span>
        </button>
      </form>
    </li>
  </ul>
</div>
<footer class="thin-stack">
  <p class="thin-cart-total">
    <span>Subtotal</span>
    <strong>$68.00</strong>
  </p>
  <p>Shipping and tax calculated at checkout.</p>
  <a href="/checkout" >Checkout</a>
  <a href="/cart">View full cart</a>
</footer>
</dialog>

Anatomy

  • Durable cart link
  • Labelled native drawer
  • Server-rendered cart lines
  • Subtotal and qualification messages
  • Checkout and full-cart links

Variants and sizes

  • Neutral theme
  • Thin-Sky theme
  • Intrinsic narrow and wide containers

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Closed
  • Open
  • Pending line action
  • Empty
  • Inventory changed
  • Price changed
  • Error
  • Reconnected

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links and forms own navigation and submission. Optional dialog, media, toast, confirm, or Datastar enhancement may coordinate mechanics but must render returned server truth.

Accessibility

Preserve landmarks, headings, labels, native controls, status text, focus order, image alternatives, and non-color state. Announce only server-confirmed changes.

Contract
DIALOG
Basis
Native labelled <dialog> and form/link controls; no drawer-specific APG role
Evidence
  • tests/unit/library/cart-checkout.test.ts

API

Use dialog.thin-mini-cart with .thin-drawer. Keep cart lines, totals, and checkout links server-rendered.

Behavior tier: datastar-required

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Products, prices, inventory messages, variant choices, and cart actions remain server-authored links, forms, and content without optional enhancement.

Assets and dependencies

  • /foundation.css
  • /layouts.css
  • /components.css
  • /patterns/ecommerce.css
  • /behaviors.js
  • /icons/sprite.svg

Dependencies: quantity-input, rating, toast, confirm-dialog, drawer, product-gallery, lightbox, datastar@1.0.2

Source: packages/ui/src/style/ecommerce.ts

Composition

Derived from the examples and style specs, not authored.

Composes