---
title: Badges
description: Pill badges in every palette, plus their inverted versions.
group: feedback
---

```html
<div class="stack-h gap-xs surface-base p-m">
  <color-mode
    palette="blue"
    class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
  >
    Blue
  </color-mode>
  <color-mode
    inverted
    palette="blue"
    class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
  >
    Inverted Blue
  </color-mode>

  <color-mode
    palette="yellow"
    class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
  >
    yellow
  </color-mode>
  <color-mode
    inverted
    palette="yellow"
    class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
  >
    Inverted yellow
  </color-mode>

  <color-mode
    palette="coral"
    class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
  >
    coral
  </color-mode>
  <color-mode
    inverted
    palette="coral"
    class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
  >
    Inverted coral
  </color-mode>

  <color-mode
    palette="green"
    class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
  >
    green
  </color-mode>
  <color-mode
    inverted
    palette="green"
    class="surface-dyed stack-v br-pill px-xs py-3xs fs-s fw-medium"
  >
    Inverted green
  </color-mode>
</div>
```