> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize the Button UI

> Modify the payment button and checkout experience to match your website's style

You can customize both the payment button and the checkout modal appearance using the `appearance` prop.

## Button Customization

### Theme Options

The button can be styled using predefined themes:

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

### Custom Colors

Customize the button's accent color:

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

## Checkout Experience Customization

### Display Mode

Choose how the checkout appears:

```tsx theme={null}
<CrossmintHostedCheckout
    appearance={{
        display: "popup", // Options: "popup", "new-tab", "same-tab"
    }}
/>
```

### Theme

Set the checkout interface theme:

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

### Overlay Options

Control the modal overlay behavior:

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

## Complete Styling Example

Here's an example combining multiple customization options:

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

<Note>
  The appearance configuration allows you to: - Customize button and checkout themes independently - Set custom accent
  colors - Control how the checkout displays (popup/tab) - Manage overlay behavior
</Note>