Button

HTML button with Switchboard link

Overview

The purpose of this component to create a button with the CTA text, bonus code, affiliate names, etc. into the copy on an HTML page and have it pull from the placement based on the provided props.

When used with pre-rendering, in the case where the client geolocated promo can’t be found, the original value that hydrated during the rendering will be preserved.

<bam-button
    id="button4"
    dev-mode="true"
    placement-id="1172"
    property-id="1"
    location="FL"
    field="title"
    context="new-york-post-right-rail"
    button-text="Click Me"
    background="gray"
    padding="20px 30px"
    class="color-test"
>
</bam-button>

You can control specific styling of the link text using the ::part pseudo-class like:

<style>
    .color-test::part(link) {
        color: rgb(28, 28, 44);
    }
</style>
<bam-button
    id="button4"
    dev-mode="true"
    placement-id="1172"
    property-id="1"
    location="FL"
    field="title"
    context="new-york-post-right-rail"
    button-text="Click Me"
    background="gray"
    padding="20px 30px"
    class="color-test"
>
</bam-button>

SSR AvailableThis component is available for server side rendering.

Properties

Property	Attribute	Description	Type	Default
affiliate	affiliate		string	undefined
affiliateType	affiliate-type		string	undefined
background	background	The background CSS value or use the value 'book' to use the book's default color	string	undefined
buttonText	button-text	Overrides the default button/field text	string	undefined
context	context	(required)	string	undefined
ctaType	cta-type		string	undefined
defer	defer		boolean	undefined
devMode	dev-mode		boolean	false
deviceType	device-type		"android" | "desktop" | "ios" | "mobile"	undefined
field	field		"affiliate-name" | "affiliate-terms" | "affiliate_name" | "affiliate_terms" | "bonus" | "cta" | "term" | "terms" | "title"	undefined
gameId	game-id		number	undefined
initialValue	initial-value		string	''
internalId	internal-id		string	undefined
isBetsyncUser	is-betsync-user		boolean	undefined
isMobile	is-mobile		boolean	undefined
league	league		string	undefined
location	location		string	undefined
moduleTitle	module-title		string	undefined
padding	padding	Override the default padding with a CSS value. Default is '--bam-spacing-small --bam-spacing-medium'.	string	undefined
pageSlug	page-slug		string	undefined
placementId	placement-id	(required)	number	undefined
propertyId	property-id	(required)	number	undefined
subdivision	subdivision		number	undefined
subscriptionTier	subscription-tier		0 | 1 | 2 | 3	undefined
underline	underline		boolean	false
wasPro	was-pro		boolean	undefined

Shadow Parts

Part	Description
"button"
"link"

---