> ## Documentation Index
> Fetch the complete documentation index at: https://crossmint-wallets-docs-2-5.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Customize the Button UI
> Modify the payment button to match the style of your website
Customizing the button style is done differently depending on the JS framework you use.
Change the button to light mode by setting `theme` as `light`. Default is `dark`.
## Customizing the button UI in React
Add custom styles to the `CrossmintPayButton` component using CSS. See the example of the React SDK below and note the `className` attribute:
```javascript theme={null}
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui";
export default function Mint() {
return (
);
}
```
Customize the style by modifying the relevant css properties. For example:
```css theme={null}
button.xmint-btn {
background-color: blueviolet;
}
```
Would modify the button's background color as follows:
Customize the text on the button by adding the property `getButtonText` and creating an inline function with the following two parameters:
* **connecting**: specifies whether the component is loading its packages.
* **paymentMethod**: returns the current payment method being used
This setup allows you to control the text depending on the state. For example, the following snippet...
```jsx theme={null}
connecting ? "Connecting" : `Pay with ${paymentMethod}`
}
/>
```
... would result in the following button.
## Customizing the button UI in Vanilla JS
Add custom styles to the `CrossmintPayButton` component using CSS. See the example of the Vanilla JS SDK below and note the `class` attribute:
```jsx theme={null}
```
When specifying the style, you must use the pseudo-element `::part`, because the payment button is a webcomponent:
Customize the style by defining `::part(button)`. For example:
```css theme={null}
.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%
);
}
```
Which would result in the following:
Customize the text by defining `::part(contentParagraph)`. For example:
```css theme={null}
.xmint-btn::part(contentParagraph) {
display: none;
}
.xmint-btn::part(button):after {
content: "Custom Buy Text";
}
```
Which would result in the following:
