---
post_title: User Experience Guidelines - Payment Button Style
menu_title: Payment Button Style
---

Use the appropriate button style depending on the site theme.

![Button styles.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Button-styles.png)

### Dark

Use on white or light-color backgrounds. Don't use on black or dark backgrounds.

![Dark.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Dark.png)

### Light

Use on dark-color backgrounds. Don't use on white or light backgrounds.

![Light.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Light.png)

### Light with outline

Use on white or light-color backgrounds that don't provide sufficient contrast. Don't use on dark or saturated backgrounds.

![Light with outline.png](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Light-with-outline.png)

### Button style and specifications

Buttons should contain the following states for resting, loading, active, and loading contexts. For additional guidance, follow the general Woo accessibility guidelines.

![Button States and specifications](https://developer.woocommerce.com/docs/wp-content/uploads/sites/3/2024/01/Button-States-and-specifications.png)