Button - Over Background

Component status
Verified
Last releasedOctober 8, 2019
Current version@spectrum-css/button@2.0.0

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

<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>
Show markup

Over Background (quiet)#
Verified

<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>
Show markup