Reference
<tl-cart-badge>
A cart icon carrying the number of items in the cart, kept current from the cart bus.
| HTML tag | <tl-cart-badge> |
| React | import { TlCartBadge } from '@ticketlayer/elements-react' |
| Category | Cart |
| Runs in | web (browser DOM) |
A cart icon carrying the number of items in the cart, kept current from the cart bus.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
badgeOnly | badge-only | Badge only mode - only shows the count bubble, no icon or button | boolean | false |
icon | icon | Custom icon (emoji or text). If not provided, uses cart SVG | string | undefined | undefined |
showEmpty | show-empty | Show the badge even when count is 0 | boolean | false |
size | size | Size variant | "lg" | "md" | "sm" | 'md' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-cart-badge__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
Events#
| Event | Description | Type |
|---|---|---|
tlClick | Emitted when the badge is clicked | CustomEvent<{ itemCount: number; }> |
Events are CustomEvents; the payload is on event.detail. In HTML, listen with element.addEventListener('tlXxx', handler); in React the wrapper exposes each one as an onTlXxx prop.