Cart Button

Button to open the Store Modal or cart

A button to open the Store Modal. If the user has items in their cart, the button will navigate straight to the Cart screen. Otherwise it opens the fonts index.

Icon style 
<fontdue-cart-button button-style="icon"></fontdue-cart-button>

import CartButton from "fontdue-js/CartButton";



<CartButton buttonStyle="icon" />
Inline style 
<fontdue-cart-button

  button-style="inline"

  label="Cart"

></fontdue-cart-button>

<CartButton buttonStyle="inline" label="Cart" />
With item count 
<fontdue-cart-button

  label="Shop"

  suffix=" ({count})"

></fontdue-cart-button>

<CartButton label="Shop" suffix=" ({count})" />
With subtotal 
<fontdue-cart-button

  label="Cart"

  suffix=" | {subtotal}"

></fontdue-cart-button>

<CartButton label="Cart" suffix=" | {subtotal}" />

The Cart Button reads the shared cart, so it’s always lazy – it loads the cart in the browser per visitor and takes no preloadedQuery.

Property Description Type
label For non-icon style buttons, the text to render inside the button. Defaults to “Cart” string
button-style Button style. If left blank, the button is unstyled. 'inline' | 'icon'
suffix Optional suffix, which can include the order item count and/or the order subtotal value with string substitution. If substitutions are found and the order has no items, it’s omitted. Supported substitutions are {count} and {subtotal}. Examples: " ({count})" renders “Cart (5)”, " | {subtotal}" renders “Cart | $50” string
Prop Description Type
label For non-icon style buttons, the text to render inside the button. Defaults to “Cart” string
buttonStyle Button style. If left blank, the button is unstyled. 'inline' | 'icon'
suffix Optional suffix, which can include the order item count and/or the order subtotal value with string substitution. If substitutions are found and the order has no items, it’s omitted. Supported substitutions are {count} and {subtotal}. Examples: " ({count})" renders “Cart (5)”, " | {subtotal}" renders “Cart | $50” string
children Custom content to render inside the button ReactNode

Custom HTML elements

When <fontdue-cart-button> doesn’t fit – you want your own markup or different behavior – add fontdue-* attributes to any element and Fontdue.js wires them up after it loads. Script-tag integration only.

<button

  type="button"

  fontdue-click="open-store-modal"

  fontdue-store-route="cart">

  Cart

</button>

Unlike <fontdue-cart-button>, the attribute-driven approach doesn’t know whether the cart is empty – clicking always opens the modal directly to the Cart page, even when no items are present.

Attribute Description Values
fontdue-click Action to trigger on click. open-store-modal
fontdue-store-route Where to navigate when the Store Modal opens. cart