Reference
<tl-buy-tickets-button>
A buy-tickets button in one of four sale states, which opens the purchase modal.
| HTML tag | <tl-buy-tickets-button> |
| React | import { TlBuyTicketsButton } from '@ticketlayer/elements-react' |
| Category | Purchase |
| Runs in | web (browser DOM) |
A buy-tickets button in one of four sale states, which opens the purchase modal.
Properties#
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
currency | currency | Currency code for price formatting | string | 'GBP' |
disabled | disabled | Disabled state | boolean | false |
eventId (required) | event-id | Event ID to purchase tickets for | string | undefined |
fullWidth | full-width | Full width button | boolean | false |
label | label | Button label override (default depends on state) | string | undefined | undefined |
occurrenceId | occurrence-id | Optional pre-selected occurrence ID | string | undefined | undefined |
price | price | Price to display (in minor units e.g. pence) | number | undefined | undefined |
pricePrefix | price-prefix | Show price prefix text | string | 'From' |
size | size | Button size | "lg" | "md" | "sm" | 'md' |
state | state | Button state - determines colour, label, and icon | "available" | "comingSoon" | "soldOut" | "waitlist" | 'available' |
unstyled | unstyled | Render into the light DOM with no stylesheet, for a page that styles the element itself: every node carries a tl-buy-tickets-button__* class. Without it the element is styled, and each node is a ::part() of the same name. | boolean | false |
variant | variant | Button variant | "outline" | "primary" | "secondary" | 'primary' |
Events#
| Event | Description | Type |
|---|---|---|
tlClick | Emitted when button is clicked (before modal opens) | CustomEvent<{ eventId: string; occurrenceId?: string | undefined; }> |
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.