Customize the Button UI

<CrossmintHostedCheckout
    appearance={{
        theme: {
            button: "light", // Options: "light", "dark", "crossmint"
        },
    }}
/>

<CrossmintHostedCheckout
    appearance={{
        variables: {
            colors: {
                accent: "#FF0000", // Your custom color
            },
        },
    }}
/>

<CrossmintHostedCheckout
    appearance={{
        display: "popup", // Options: "popup", "new-tab"
    }}
/>

<CrossmintHostedCheckout
    appearance={{
        theme: {
            checkout: "dark", // Options: "light", "dark"
        },
    }}
/>

<CrossmintHostedCheckout
    appearance={{
        overlay: {
            enabled: false, // Disable the dark overlay behind the modal
        },
    }}
/>

<CrossmintHostedCheckout
    appearance={{
        theme: {
            button: "light",
            checkout: "dark",
        },
        variables: {
            colors: {
                accent: "#FF0000",
            },
        },
        display: "popup",
        overlay: {
            enabled: true,
        },
    }}
    // ... other props
/>