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

# Button color updates

> PayPal button color updates require no JavaScript SDK integration changes.

When PayPal updates its brand guidelines, the PayPal JavaScript SDK v5 and v6 automatically update the appearance of buttons rendered on your site. No code changes are required.

<table style={{ borderCollapse: "collapse", width: "100%" }}>
  <thead>
    <tr>
      <th scope="col" style={{ border: "1px solid #e5e7eb", backgroundColor: "#f9fafb", padding: "12px 16px", textAlign: "left" }}>Current color</th>
      <th scope="col" style={{ border: "1px solid #e5e7eb", backgroundColor: "#f9fafb", padding: "12px 16px", textAlign: "left" }}>Current button</th>

      <th scope="col" aria-hidden="true" style={{ border: "1px solid #e5e7eb", backgroundColor: "#f9fafb", padding: "12px 16px" }} />

      <th scope="col" style={{ border: "1px solid #e5e7eb", backgroundColor: "#f9fafb", padding: "12px 16px", textAlign: "left" }}>New button</th>
      <th scope="col" style={{ border: "1px solid #e5e7eb", backgroundColor: "#f9fafb", padding: "12px 16px", textAlign: "left" }}>New color</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}><strong>Gold</strong></td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}>
        <img src="https://www.paypalobjects.com/ppdevdocs/current-gold.png" alt="Current gold PayPal button" width="220" style={{ border: "1px solid #e2e2e2", borderRadius: "4px", verticalAlign: "middle" }} />
      </td>

      <td aria-hidden="true" style={{ border: "1px solid #e5e7eb", padding: "12px 16px", textAlign: "center", verticalAlign: "middle" }}>→</td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}>
        <img src="https://www.paypalobjects.com/ppdevdocs/new-blue.svg" alt="New blue PayPal button" width="220" style={{ border: "1px solid #e2e2e2", borderRadius: "4px", verticalAlign: "middle" }} />
      </td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}><strong>Blue</strong></td>
    </tr>

    <tr>
      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}><strong>Blue</strong></td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}>
        <img src="https://www.paypalobjects.com/ppdevdocs/current-blue.png" alt="Current blue PayPal button" width="220" style={{ border: "1px solid #e2e2e2", borderRadius: "4px", verticalAlign: "middle" }} />
      </td>

      <td aria-hidden="true" style={{ border: "1px solid #e5e7eb", padding: "12px 16px", textAlign: "center", verticalAlign: "middle" }}>→</td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}>
        <img src="https://www.paypalobjects.com/ppdevdocs/new-blue.svg" alt="New blue PayPal button" width="220" style={{ border: "1px solid #e2e2e2", borderRadius: "4px", verticalAlign: "middle" }} />
      </td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}><strong>Blue</strong></td>
    </tr>

    <tr>
      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}><strong>Silver</strong></td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}>
        <img src="https://www.paypalobjects.com/ppdevdocs/current-silver.svg" alt="Current silver PayPal button" width="220" style={{ border: "1px solid #e2e2e2", borderRadius: "4px", verticalAlign: "middle" }} />
      </td>

      <td aria-hidden="true" style={{ border: "1px solid #e5e7eb", padding: "12px 16px", textAlign: "center", verticalAlign: "middle" }}>→</td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}>
        <img src="https://www.paypalobjects.com/ppdevdocs/new-white.svg" alt="New white PayPal button" width="220" style={{ border: "1px solid #e2e2e2", borderRadius: "4px", verticalAlign: "middle" }} />
      </td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}><strong>White</strong></td>
    </tr>

    <tr>
      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}><strong>White</strong></td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}>
        <img src="https://www.paypalobjects.com/ppdevdocs/current-white.png" alt="Current white PayPal button" width="220" style={{ border: "1px solid #e2e2e2", borderRadius: "4px", verticalAlign: "middle" }} />
      </td>

      <td aria-hidden="true" style={{ border: "1px solid #e5e7eb", padding: "12px 16px", textAlign: "center", verticalAlign: "middle" }}>→</td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}>
        <img src="https://www.paypalobjects.com/ppdevdocs/new-white.svg" alt="New white PayPal button" width="220" style={{ border: "1px solid #e2e2e2", borderRadius: "4px", verticalAlign: "middle" }} />
      </td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}><strong>White</strong></td>
    </tr>

    <tr>
      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}><strong>Black</strong></td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}>
        <img src="https://www.paypalobjects.com/ppdevdocs/current-black.png" alt="Current black PayPal button" width="220" style={{ border: "1px solid #e2e2e2", borderRadius: "4px", verticalAlign: "middle" }} />
      </td>

      <td aria-hidden="true" style={{ border: "1px solid #e5e7eb", padding: "12px 16px", textAlign: "center", verticalAlign: "middle" }}>→</td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}>
        <img src="https://www.paypalobjects.com/ppdevdocs/new-black.svg" alt="New black PayPal button" width="220" style={{ border: "1px solid #e2e2e2", borderRadius: "4px", verticalAlign: "middle" }} />
      </td>

      <td style={{ border: "1px solid #e5e7eb", padding: "12px 16px", verticalAlign: "middle" }}><strong>Black</strong></td>
    </tr>
  </tbody>
</table>

## Set your button color

You can set the button color for accessibility or branding reasons. To choose a specific color, apply one of the [supported color classes](/reference/sdk/js/v6/reference#web-components) to your `<paypal-button>` element.

```html theme={null}
<paypal-button type="checkout" class="paypal-blue"></paypal-button>
```

### Ensure accessibility

To comply with [WCAG 2.1 AA standards](https://www.w3.org/TR/WCAG21/):

* On light backgrounds, use the blue or black button.
* On dark backgrounds, use the white button.