From 8c1ddc7e8a31643859f2f85b03acb6440a8277c2 Mon Sep 17 00:00:00 2001
From: Larry Davis <lawdavis@adobe.com>
Date: Mon, 16 Mar 2020 12:43:19 -0700
Subject: [PATCH] docs: add exampes for Quiet Emphasized Action Button

fix: correct Quiet Emphasized Action Button
---
 components/button/metadata/actionbutton.yml | 375 ++++++++++++++++++++
 components/button/skin.css                  | 126 +++----
 2 files changed, 438 insertions(+), 63 deletions(-)

diff --git a/components/button/metadata/actionbutton.yml b/components/button/metadata/actionbutton.yml
index 7b6b4fee37d..fa5b3dc8243 100644
--- a/components/button/metadata/actionbutton.yml
+++ b/components/button/metadata/actionbutton.yml
@@ -275,3 +275,378 @@ examples:
           <use xlink:href="#spectrum-css-icon-CornerTriangle" />
         </svg>
       </button>
+  - id: actionbutton
+    name: Emphasized
+    markup: |
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized">
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized is-selected">
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized" disabled>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized is-selected" disabled>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+
+      <br><br>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized is-selected">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized is-selected" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+
+      <br><br>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized is-selected">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized is-selected" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+      </button>
+
+      <br><br>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-CornerTriangle" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized is-selected">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-CornerTriangle" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-CornerTriangle" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized is-selected" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-CornerTriangle" />
+        </svg>
+      </button>
+
+      <br><br>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized">
+        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
+          <g fill-rule="evenodd">
+            <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
+            <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
+            <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
+            <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
+            <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
+            <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
+            <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
+            <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
+            <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
+            <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
+            <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
+            <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
+            <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
+          </g>
+        </svg>
+        <span class="spectrum-ActionButton-label">Button</span>
+      </button>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized is-selected">
+        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
+          <g fill-rule="evenodd">
+            <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
+            <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
+            <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
+            <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
+            <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
+            <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
+            <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
+            <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
+            <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
+            <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
+            <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
+            <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
+            <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
+          </g>
+        </svg>
+        <span class="spectrum-ActionButton-label">Button</span>
+      </button>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized" disabled>
+        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
+          <g fill-rule="evenodd">
+            <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
+            <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
+            <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
+            <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
+            <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
+            <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
+            <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
+            <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
+            <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
+            <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
+            <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
+            <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
+            <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
+          </g>
+        </svg>
+        <span class="spectrum-ActionButton-label">Button</span>
+      </button>
+
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized is-selected" disabled>
+        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
+          <g fill-rule="evenodd">
+            <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
+            <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
+            <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
+            <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
+            <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
+            <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
+            <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
+            <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
+            <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
+            <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
+            <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
+            <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
+            <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
+          </g>
+        </svg>
+        <span class="spectrum-ActionButton-label">Button</span>
+      </button>
+
+  - id: actionbutton
+    name: Emphasized
+    markup: |
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+
+      <br><br>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <span class="spectrum-ActionButton-label">Edit</span>
+      </button>
+
+      <br><br>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+      </button>
+
+      <br><br>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-CornerTriangle" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-CornerTriangle" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-CornerTriangle" />
+        </svg>
+      </button>
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
+        <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <use xlink:href="#spectrum-icon-18-Edit" />
+        </svg>
+        <svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
+          <use xlink:href="#spectrum-css-icon-CornerTriangle" />
+        </svg>
+      </button>
+
+      <br><br>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet">
+        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
+          <g fill-rule="evenodd">
+            <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
+            <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
+            <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
+            <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
+            <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
+            <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
+            <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
+            <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
+            <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
+            <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
+            <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
+            <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
+            <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
+          </g>
+        </svg>
+        <span class="spectrum-ActionButton-label">Button</span>
+      </button>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected">
+        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
+          <g fill-rule="evenodd">
+            <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
+            <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
+            <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
+            <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
+            <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
+            <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
+            <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
+            <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
+            <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
+            <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
+            <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
+            <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
+            <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
+          </g>
+        </svg>
+        <span class="spectrum-ActionButton-label">Button</span>
+      </button>
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet" disabled>
+        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
+          <g fill-rule="evenodd">
+            <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
+            <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
+            <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
+            <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
+            <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
+            <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
+            <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
+            <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
+            <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
+            <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
+            <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
+            <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
+            <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
+          </g>
+        </svg>
+        <span class="spectrum-ActionButton-label">Button</span>
+      </button>
+
+
+      <button class="spectrum-ActionButton spectrum-ActionButton--emphasized spectrum-ActionButton--quiet is-selected" disabled>
+        <svg xmlns="http://www.w3.org/2000/svg" class="spectrum-Icon spectrum-Icon--sizeS">
+          <g fill-rule="evenodd">
+            <path fill-rule="nonzero" d="M16.5,2 L14,2 L14,0.5 C14,0.223857625 13.7761424,0 13.5,0 L12.5,0 C12.2238576,0 12,0.223857625 12,0.5 L12,2 L5,2 L5,0.5 C5,0.223857625 4.77614237,0 4.5,0 L3.5,0 C3.22385763,0 3,0.223857625 3,0.5 L3,2 L0.5,2 C0.223857625,2 3.38176876e-17,2.22385763 0,2.5 L0,15.5 C3.38176876e-17,15.7761424 0.223857625,16 0.5,16 L16.5,16 C16.7761424,16 17,15.7761424 17,15.5 L17,2.5 C17,2.22385763 16.7761424,2 16.5,2 Z M16,15 L1,15 L1,3 L3,3 L3,3.5 C3,3.77614237 3.22385763,4 3.5,4 L4.5,4 C4.77614237,4 5,3.77614237 5,3.5 L5,3 L12,3 L12,3.5 C12,3.77614237 12.2238576,4 12.5,4 L13.5,4 C13.7761424,4 14,3.77614237 14,3.5 L14,3 L16,3 L16,15 Z"/>
+            <polygon fill-rule="nonzero" points="5 7 3 7 3 5 5 5"/>
+            <polygon fill-rule="nonzero" points="8 7 6 7 6 5 8 5"/>
+            <polygon fill-rule="nonzero" points="11 7 9 7 9 5 11 5"/>
+            <polygon fill-rule="nonzero" points="14 7 12 7 12 5 14 5"/>
+            <polygon fill-rule="nonzero" points="5 10 3 10 3 8 5 8"/>
+            <polygon fill-rule="nonzero" points="8 10 6 10 6 8 8 8"/>
+            <polygon fill-rule="nonzero" points="11 10 9 10 9 8 11 8"/>
+            <polygon fill-rule="nonzero" points="14 10 12 10 12 8 14 8"/>
+            <polygon fill-rule="nonzero" points="5 13 3 13 3 11 5 11"/>
+            <polygon fill-rule="nonzero" points="8 13 6 13 6 11 8 11"/>
+            <polygon fill-rule="nonzero" points="11 13 9 13 9 11 11 11"/>
+            <polygon fill-rule="nonzero" points="14 13 12 13 12 11 14 11"/>
+          </g>
+        </svg>
+        <span class="spectrum-ActionButton-label">Button</span>
+      </button>
\ No newline at end of file
diff --git a/components/button/skin.css b/components/button/skin.css
index a4da261fcfa..89cbdbf5a92 100644
--- a/components/button/skin.css
+++ b/components/button/skin.css
@@ -433,69 +433,6 @@ governing permissions and limitations under the License.
   }
 }
 
-.spectrum-ActionButton--quiet {
-  background-color: var(--spectrum-actionbutton-quiet-background-color);
-  border-color: var(--spectrum-actionbutton-quiet-border-color);
-  color: var(--spectrum-actionbutton-quiet-text-color);
-
-  &:hover {
-    background-color: var(--spectrum-actionbutton-quiet-background-color-hover);
-    border-color: var(--spectrum-actionbutton-quiet-border-color-hover);
-    color: var(--spectrum-actionbutton-quiet-text-color-hover);
-  }
-
-  &:focus-ring {
-    background-color: var(--spectrum-actionbutton-quiet-background-color-key-focus);
-    box-shadow: 0 0 0 var(--spectrum-actionbutton-quiet-border-size-key-focus) var(--spectrum-actionbutton-quiet-border-color-key-focus);
-    border-color: var(--spectrum-actionbutton-quiet-border-color-key-focus);
-    color: var(--spectrum-actionbutton-quiet-text-color-key-focus);
-  }
-
-  &:active {
-    background-color: var(--spectrum-actionbutton-quiet-background-color-down);
-    border-color: var(--spectrum-actionbutton-quiet-border-color-down);
-    color: var(--spectrum-actionbutton-quiet-text-color-down);
-  }
-
-  &:disabled,
-  &.is-disabled {
-    background-color: var(--spectrum-actionbutton-quiet-background-color-disabled);
-    border-color: var(--spectrum-actionbutton-quiet-border-color-disabled);
-    color: var(--spectrum-actionbutton-quiet-text-color-disabled);
-  }
-
-  &.is-selected {
-    background-color: var(--spectrum-actionbutton-quiet-background-color-selected);
-    border-color: var(--spectrum-actionbutton-quiet-border-color-selected);
-    color: var(--spectrum-actionbutton-quiet-text-color-selected);
-
-    &:focus-ring {
-      background-color: var(--spectrum-actionbutton-quiet-background-color-selected-key-focus);
-      border-color: var(--spectrum-actionbutton-quiet-border-color-selected-key-focus);
-      color: var(--spectrum-actionbutton-quiet-text-color-selected-key-focus);
-    }
-
-    &:hover {
-      background-color: var(--spectrum-actionbutton-quiet-background-color-selected-hover);
-      border-color: var(--spectrum-actionbutton-quiet-border-color-selected-hover);
-      color: var(--spectrum-actionbutton-quiet-text-color-selected-hover);
-    }
-
-    &:active {
-      background-color: var(--spectrum-actionbutton-quiet-background-color-selected-down);
-      border-color: var(--spectrum-actionbutton-quiet-border-color-selected-down);
-      color: var(--spectrum-actionbutton-quiet-text-color-selected-down);
-    }
-
-    &:disabled,
-    &.is-disabled {
-      background-color: var(--spectrum-actionbutton-quiet-background-color-selected-disabled);
-      border-color: var(--spectrum-actionbutton-quiet-border-color-selected-disabled);
-      color: var(--spectrum-actionbutton-quiet-text-color-selected-disabled);
-    }
-  }
-}
-
 .spectrum-ActionButton--emphasized {
   background-color: var(--spectrum-actionbutton-emphasized-background-color);
   border-color: var(--spectrum-actionbutton-emphasized-border-color);
@@ -630,6 +567,69 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-ActionButton--quiet {
+  background-color: var(--spectrum-actionbutton-quiet-background-color);
+  border-color: var(--spectrum-actionbutton-quiet-border-color);
+  color: var(--spectrum-actionbutton-quiet-text-color);
+
+  &:hover {
+    background-color: var(--spectrum-actionbutton-quiet-background-color-hover);
+    border-color: var(--spectrum-actionbutton-quiet-border-color-hover);
+    color: var(--spectrum-actionbutton-quiet-text-color-hover);
+  }
+
+  &:focus-ring {
+    background-color: var(--spectrum-actionbutton-quiet-background-color-key-focus);
+    box-shadow: 0 0 0 var(--spectrum-actionbutton-quiet-border-size-key-focus) var(--spectrum-actionbutton-quiet-border-color-key-focus);
+    border-color: var(--spectrum-actionbutton-quiet-border-color-key-focus);
+    color: var(--spectrum-actionbutton-quiet-text-color-key-focus);
+  }
+
+  &:active {
+    background-color: var(--spectrum-actionbutton-quiet-background-color-down);
+    border-color: var(--spectrum-actionbutton-quiet-border-color-down);
+    color: var(--spectrum-actionbutton-quiet-text-color-down);
+  }
+
+  &:disabled,
+  &.is-disabled {
+    background-color: var(--spectrum-actionbutton-quiet-background-color-disabled);
+    border-color: var(--spectrum-actionbutton-quiet-border-color-disabled);
+    color: var(--spectrum-actionbutton-quiet-text-color-disabled);
+  }
+
+  &.is-selected {
+    background-color: var(--spectrum-actionbutton-quiet-background-color-selected);
+    border-color: var(--spectrum-actionbutton-quiet-border-color-selected);
+    color: var(--spectrum-actionbutton-quiet-text-color-selected);
+
+    &:focus-ring {
+      background-color: var(--spectrum-actionbutton-quiet-background-color-selected-key-focus);
+      border-color: var(--spectrum-actionbutton-quiet-border-color-selected-key-focus);
+      color: var(--spectrum-actionbutton-quiet-text-color-selected-key-focus);
+    }
+
+    &:hover {
+      background-color: var(--spectrum-actionbutton-quiet-background-color-selected-hover);
+      border-color: var(--spectrum-actionbutton-quiet-border-color-selected-hover);
+      color: var(--spectrum-actionbutton-quiet-text-color-selected-hover);
+    }
+
+    &:active {
+      background-color: var(--spectrum-actionbutton-quiet-background-color-selected-down);
+      border-color: var(--spectrum-actionbutton-quiet-border-color-selected-down);
+      color: var(--spectrum-actionbutton-quiet-text-color-selected-down);
+    }
+
+    &:disabled,
+    &.is-disabled {
+      background-color: var(--spectrum-actionbutton-quiet-background-color-selected-disabled);
+      border-color: var(--spectrum-actionbutton-quiet-border-color-selected-disabled);
+      color: var(--spectrum-actionbutton-quiet-text-color-selected-disabled);
+    }
+  }
+}
+
 .spectrum-Button--warning.spectrum-Button--quiet {
   background-color: var(--spectrum-button-quiet-warning-background-color);
   border-color: var(--spectrum-button-quiet-warning-border-color);