---
title: Banner
description: An undo banner in all four palettes.
group: feedback
---

```html
<div class="stack-v gap-s w-max-7">
  <color-mode palette="green">
    <div class="surface-dyed py-4xs px-xs b-all bc-subtle br-l">
      <div class="stack-h gap-xs justify-center">
        <p class="ink-subtle fs-s">
          This project was rolled back by
          <a class="v-link" href="#">@jberglund</a>
        </p>
        <button class="v-button" data-variant="plain" data-size="small">
          Undo rollback
        </button>
      </div>
    </div>
  </color-mode>

  <color-mode palette="yellow">
    <div class="surface-dyed py-4xs px-xs b-all bc-subtle br-l">
      <div class="stack-h gap-xs justify-center">
        <p class="ink-subtle fs-s">
          This project was rolled back by
          <a class="v-link" href="#">@jberglund</a>
        </p>
        <button class="v-button" data-variant="plain" data-size="small">
          Undo rollback
        </button>
      </div>
    </div>
  </color-mode>

  <color-mode palette="coral">
    <div class="surface-dyed py-4xs px-xs b-all bc-subtle br-l">
      <div class="stack-h gap-xs justify-center">
        <p class="ink-subtle fs-s">
          This project was rolled back by
          <a class="v-link" href="#">@jberglund</a>
        </p>
        <button class="v-button" data-variant="plain" data-size="small">
          Undo rollback
        </button>
      </div>
    </div>
  </color-mode>

  <color-mode palette="blue">
    <div class="surface-dyed py-4xs px-xs b-all bc-subtle br-l">
      <div class="stack-h gap-xs justify-center">
        <p class="ink-subtle fs-s">
          This project was rolled back by
          <a class="v-link" href="#">@jberglund</a>
        </p>
        <button class="v-button" data-variant="plain" data-size="small">
          Undo rollback
        </button>
      </div>
    </div>
  </color-mode>
</div>
```