Use the `inverted` attribute when displayed on primary background.

```html
<div class="flex gap-12 p-12 bg-primary">
  <sd-button variant="primary" inverted>Inverted</sd-button>
  <sd-button variant="secondary" inverted>Inverted</sd-button>
  <sd-button variant="tertiary" inverted>Inverted</sd-button>
  <sd-button variant="cta" inverted>Inverted</sd-button>
</div>
```