• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Button - Over Background

Component status
Verified
Last releasedOctober 20, 2020
Current version@spectrum-css/button@3.0.0-beta.5

Usage notes


When a button needs to be placed on top of a colored background or a visual, use the over background button. In order to implement this button, you must set the CSS color property of a parent element to the same value as the background the button is placed against.

Variants


Over background
Verified

Show markup
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <button class="spectrum-Button spectrum-Button--overBackground">
    <span class="spectrum-Button-label">Button</span>
  </button>

  <button class="spectrum-Button spectrum-Button--overBackground" disabled>
    <span class="spectrum-Button-label">Button</span>
  </button>
</div>

Over Background (quiet)
Verified

Show markup
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet">
    <span class="spectrum-Button-label">Button</span>
  </button>

  <button class="spectrum-Button spectrum-Button--overBackground spectrum-Button--quiet" disabled>
    <span class="spectrum-Button-label">Button</span>
  </button>
</div>