Customize Button Style

Crossmint offers two different ways to integrate our buy button into your website:

• React.js, Next.js SDK
• VanillaJS SDK

Customization is slightly different depending on which one you're using, so choose the correct one.

📘

Dark and Light Modes Included

The Crossmint button includes dark and light themes out-of-the-box. The dark mode is set by default, but you can change this with the theme prop. Accepted values are dark (default one) and light.
This prop works for both SDKs.

Customizing the React.js Crossmint button

You can add your custom styles to your CrossmintPayButton component. It only takes a few css rules to make it happen.

import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";

export default function Mint() {
    return (
        <div>
            <CrossmintPayButton    
                clientId="_YOUR_CLIENT_ID"
                className="xmint-btn"
            />
        </div>
    );
}

We can see here that we have a React functional component called Mint where we are rendering the CrossmintPayButton component. Notice that we have added a className prop with the custom class name we will use to style our button.

Now lets leverage CSS specificity to overcome Crossmint's default classes. In our stylesheets, we could write:

button.xmint-btn {
    background-color: blueviolet;
}

And the result would be:

Changing the button text (reactjs)

To customize the Crossmint pay button text, add the property getButtonText and create an inline function with the two parameters:

connecting: A state in which the component is loading its packages
paymentMethod: returns the current payment method being used

You can then freely control the text depending on the state, as demonstrated below.

<CrossmintPayButton
getButtonText={(connecting, paymentMethod) =>
          connecting ? "Connecting" : `Pay with ${paymentMethod}`
        }
/>

This will result in a button with custom text:

Customizing the Vanilla JS Crossmint button

Let's see an example of how to customize the Crossmint button when using our VanillaJS Client SDK:

<crossmint-pay-button 
    clientId="_YOUR_CLIENT_ID_"
    mintConfig='{"type": "candy-machine"}'
    class="xmint-btn"
/>

Unlike the React.js version of the SDK, use the ordinary class attribute to add a custom class to the Crossmint button.

.xmint-btn::part(button) { 
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); 
}

.xmint-btn::part(contentParagraph) { 
    color: white;
    font-size: 1.25rem; 
}

Notice how we're utilizing the CSS psuedo-element ::part because our Vanilla JS Crossmint Button is a web component.
To customize the button use ::part(button) and to customize the text use ::part(contentParagraph).

The result will look like the following:

Changing the button text (vanilla js)

.xmint-btn::part(contentParagraph) {
  display: none;
}
.xmint-btn::part(button):after {
  content: "Custom Buy Text"
}

This will result in a button with custom text: