@zohodesk/components 1.6.25 → 1.6.27

package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -1,19 +1,40 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
+exports[`Button Presets Should render preset BLACK_TEXT_BRAND_ONHOVER 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
-    aria-describedby="button-description"
     aria-disabled="false"
-    aria-label="Smart Button"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button text-black hover:text-brand-80 focus:text-brand-80 active:text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset BLACK_TEXT_BRAND_ONHOVER in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -27,30 +48,238 @@ exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should apply customClass to wrapper, text and icon 1`] = `
+exports[`Button Presets Should render preset BRAND_BG_ONSELECT 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle customButtonClass"
+    class="buttonReset button text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     >
-      <i
-        aria-hidden="true"
-        class="zd_font_icons basic icon-plus customIconClass"
-        data-id="fontIcon"
-        data-selector-id="fontIcon"
-        style="--zd-iconfont-size: var(--zd_font_size16);"
-      />
       <div
-        class="dotted size13 customTextClass"
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset BRAND_BG_ONSELECT in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-brand-80 selected:text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset BRAND_GHOST 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset BRAND_GHOST in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:text-brand-80 selected:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset BRAND_TEXT_ONLY 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset BRAND_TEXT_ONLY in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:text-brand-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset BRAND_TEXT_TINTED_DANGER_HOVER 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button hover:bg-red-10 focus:bg-red-10 active:bg-red-10 text-brand-80 hover:text-red-70 focus:text-red-70 active:text-red-70 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset BRAND_TEXT_TINTED_DANGER_HOVER in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-red-10 selected:text-red-70 selected:border-red-30 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset BRAND_TEXT_TINTED_HOVER 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button hover:bg-brand-10 focus:bg-brand-10 active:bg-brand-10 text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset BRAND_TEXT_TINTED_HOVER in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-brand-10 selected:text-brand-80 selected:border-brand-10 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
       >
         Button
       </div>
@@ -59,18 +288,41 @@ exports[`Button - Component Should apply customClass to wrapper, text and icon 1
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should apply customProps to wrapper, text and icon 1`] = `
+exports[`Button Presets Should render preset BRAND_TINTED_OUTLINE 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button bg-brand-10 hover:bg-brand-20 focus:bg-brand-20 active:bg-brand-20 text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-10 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset BRAND_TINTED_OUTLINE in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-brand-10 selected:text-brand-80 selected:border-brand-10 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -84,18 +336,676 @@ exports[`Button - Component Should apply customProps to wrapper, text and icon 1
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should be disabled when isDisabled prop is true 1`] = `
+exports[`Button Presets Should render preset SECONDARY_GHOST_BRAND_TINTED_ONSELECT 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button text-black hover:text-black focus:text-black active:text-black border-grey-65 hover:border-grey-55 focus:border-grey-55 active:border-grey-55 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset SECONDARY_GHOST_BRAND_TINTED_ONSELECT in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-brand-10 selected:text-black selected:border-brand-10 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset SECONDARY_GHOST_CANCEL 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button text-grey-65 hover:text-grey-100 focus:text-grey-100 active:text-grey-100 border-grey-65 hover:border-grey-55 focus:border-grey-55 active:border-grey-55 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset SECONDARY_GHOST_CANCEL in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-grey-65 selected:text-white border-grey-65 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset SUCCESS_GHOST 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-green-80 hover:border-green-100 focus:border-green-100 active:border-green-100 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset SUCCESS_GHOST in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:text-green-80 selected:border-green-80 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset SUCCESS_TEXT_ONLY 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset SUCCESS_TEXT_ONLY in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:text-green-80 border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset SUCCESS_TINTED_OUTLINE 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button bg-green-10 hover:bg-green-30 focus:bg-green-30 active:bg-green-30 text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-green-30 hover:border-green-100 focus:border-green-100 active:border-green-100 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Presets Should render preset SUCCESS_TINTED_OUTLINE in selected state 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-green-10 selected:text-green-80 selected:border-green-30 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should apply a11yAttributes to the button 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-describedby="button-description"
+    aria-disabled="false"
+    aria-label="Smart Button"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should apply customAttributes to button elements 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
+    data-wrapper="wrapperAttr"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+        data-text="textAttr"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should apply customClass to wrapper, text and icon 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIconWithText customButtonClass"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle customIconClass"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size16);"
+      />
+      <div
+        class="dotted size13 customTextClass"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should apply customProps to wrapper, text and icon 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIconWithText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should be disabled when isDisabled prop is true 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="true"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText disabledOpac disabledPointer"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render Sizes of buttons - full 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeFull shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render Sizes of buttons - large 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeLarge shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render Sizes of buttons - medium 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render Sizes of buttons - small 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeSmall shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render Status of buttons - default 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render Status of buttons - loading 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="true"
+    aria-disabled="true"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink overlayHidden"
+      data-id="flex"
+      data-test-id="flex"
+    />
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center loaderOverlay"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <svg
+        aria-hidden="true"
+        class="spinner"
+        role="img"
+        viewBox="0 0 24 24"
+      >
+        <circle
+          class="spinnerTrack"
+          cx="12"
+          cy="12"
+          r="10"
+        />
+        <circle
+          class="spinnerHead"
+          cx="12"
+          cy="12"
+          r="10"
+        />
+      </svg>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render Status of buttons - success 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink overlayHidden"
+      data-id="flex"
+      data-test-id="flex"
+    />
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center successOverlay"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <svg
+        aria-hidden="true"
+        class="tick"
+        role="img"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M4 12l5 5L20 6"
+        />
+      </svg>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render appearance of buttons - { bg: false, border: true } 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button hover:bg-brand-80 focus:bg-brand-80 active:bg-brand-80 text-brand-80 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render appearance of buttons - { bg: true, text: 'black' } 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-black hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render appearance of buttons - { border: true } 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render appearance of buttons - { text: true } 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render appearance of buttons - {} 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="false"
+    aria-pressed="false"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render disabledAppearance of buttons - dull 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="true"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText disabledOpac disabledPointer"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render disabledAppearance of buttons - none 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-disabled="true"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText disabledPointer"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render disabledAppearance of buttons - strike 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="true"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledOpac disabledPointer"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText disabledPointer strike"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -103,18 +1013,17 @@ exports[`Button - Component Should be disabled when isDisabled prop is true 1`]
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render Sizes of buttons - full 1`] = `
+exports[`Button Should render hoverAppearance of buttons - { bg: false, border: true } 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeFull shapeRoundedRectangle"
+    class="buttonReset button bg-brand-80 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent hover:border-brand-80 focus:border-brand-80 active:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -122,18 +1031,17 @@ exports[`Button - Component Should render Sizes of buttons - full 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render Sizes of buttons - large 1`] = `
+exports[`Button Should render hoverAppearance of buttons - { bg: true, text: 'black' } 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeLarge shapeRoundedRectangle"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-black focus:text-black active:text-black border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -141,18 +1049,17 @@ exports[`Button - Component Should render Sizes of buttons - large 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render Sizes of buttons - medium 1`] = `
+exports[`Button Should render hoverAppearance of buttons - { border: true } 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent hover:border-brand-80 focus:border-brand-80 active:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -160,18 +1067,17 @@ exports[`Button - Component Should render Sizes of buttons - medium 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render Sizes of buttons - small 1`] = `
+exports[`Button Should render hoverAppearance of buttons - { text: true } 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeSmall shapeRoundedRectangle"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -179,18 +1085,17 @@ exports[`Button - Component Should render Sizes of buttons - small 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render Status of buttons - default 1`] = `
+exports[`Button Should render hoverAppearance of buttons - {} 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -198,23 +1103,22 @@ exports[`Button - Component Should render Status of buttons - default 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render Status of buttons - loading 1`] = `
+exports[`Button Should render loader overlay when status is loading and loaderPlacement is overlay 1`] = `
 <DocumentFragment>
   <button
     aria-busy="true"
     aria-disabled="true"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink overlayHidden"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink overlayHidden"
       data-id="flex"
       data-test-id="flex"
     />
     <div
-      class="flex row alignItems_center justifyContent_center loaderOverlay"
+      class="d-flex d-flex-row d-items-center d-justify-center loaderOverlay"
       data-id="flex"
       data-test-id="flex"
     >
@@ -242,34 +1146,86 @@ exports[`Button - Component Should render Status of buttons - loading 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render Status of buttons - success 1`] = `
+exports[`Button Should render loaderPlacement of buttons - end 1`] = `
 <DocumentFragment>
   <button
-    aria-busy="false"
-    aria-disabled="false"
+    aria-busy="true"
+    aria-disabled="true"
+    aria-pressed="false"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
+    type="button"
+  >
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <div
+        class="d-flex d-flex-row d-items-center d-justify-center"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <svg
+          aria-hidden="true"
+          class="spinner"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            class="spinnerTrack"
+            cx="12"
+            cy="12"
+            r="10"
+          />
+          <circle
+            class="spinnerHead"
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </div>
+    </div>
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button Should render loaderPlacement of buttons - overlay 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="true"
+    aria-disabled="true"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink overlayHidden"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink overlayHidden"
       data-id="flex"
       data-test-id="flex"
     />
     <div
-      class="flex row alignItems_center justifyContent_center successOverlay"
+      class="d-flex d-flex-row d-items-center d-justify-center loaderOverlay"
       data-id="flex"
       data-test-id="flex"
     >
       <svg
         aria-hidden="true"
-        class="tick"
+        class="spinner"
         role="img"
         viewBox="0 0 24 24"
       >
-        <path
-          d="M4 12l5 5L20 6"
+        <circle
+          class="spinnerTrack"
+          cx="12"
+          cy="12"
+          r="10"
+        />
+        <circle
+          class="spinnerHead"
+          cx="12"
+          cy="12"
+          r="10"
         />
       </svg>
     </div>
@@ -277,37 +1233,61 @@ exports[`Button - Component Should render Status of buttons - success 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render bgAppearance of buttons - default 1`] = `
+exports[`Button Should render loaderPlacement of buttons - start 1`] = `
 <DocumentFragment>
   <button
-    aria-busy="false"
-    aria-disabled="false"
+    aria-busy="true"
+    aria-disabled="true"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
-    />
+    >
+      <div
+        class="d-flex d-flex-row d-items-center d-justify-center"
+        data-id="flex"
+        data-test-id="flex"
+      >
+        <svg
+          aria-hidden="true"
+          class="spinner"
+          role="img"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            class="spinnerTrack"
+            cx="12"
+            cy="12"
+            r="10"
+          />
+          <circle
+            class="spinnerHead"
+            cx="12"
+            cy="12"
+            r="10"
+          />
+        </svg>
+      </div>
+    </div>
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render bgAppearance of buttons - none 1`] = `
+exports[`Button Should render palette of buttons - brand 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button text-brand-80 border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button bg-brand-80 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -315,18 +1295,17 @@ exports[`Button - Component Should render bgAppearance of buttons - none 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render bgAppearance of buttons - onHover 1`] = `
+exports[`Button Should render palette of buttons - brandLighter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button text-brand-80 border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button bg-brand-10 hover:bg-brand-20 focus:bg-brand-20 active:bg-brand-20 text-brand-80 hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -334,18 +1313,17 @@ exports[`Button - Component Should render bgAppearance of buttons - onHover 1`]
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render borderAppearance of buttons - default 1`] = `
+exports[`Button Should render palette of buttons - danger 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button bg-red-70 hover:bg-red-100 focus:bg-red-100 active:bg-red-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -353,18 +1331,17 @@ exports[`Button - Component Should render borderAppearance of buttons - default
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render borderAppearance of buttons - none 1`] = `
+exports[`Button Should render palette of buttons - dangerLighter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle"
+    class="buttonReset button bg-red-10 hover:bg-red-30 focus:bg-red-30 active:bg-red-30 text-red-70 hover:text-red-100 focus:text-red-100 active:text-red-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -372,18 +1349,17 @@ exports[`Button - Component Should render borderAppearance of buttons - none 1`]
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render borderAppearance of buttons - onHover 1`] = `
+exports[`Button Should render palette of buttons - info 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-transparent sizeMedium shapeRoundedRectangle"
+    class="buttonReset button bg-blue-80 hover:bg-blue-100 focus:bg-blue-100 active:bg-blue-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -391,18 +1367,17 @@ exports[`Button - Component Should render borderAppearance of buttons - onHover
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render disabledAppearance of buttons - dull 1`] = `
+exports[`Button Should render palette of buttons - infoLighter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
-    aria-disabled="true"
+    aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledOpac disabledPointer"
+    class="buttonReset button bg-blue-10 hover:bg-blue-20 focus:bg-blue-20 active:bg-blue-20 text-blue-80 hover:text-blue-100 focus:text-blue-100 active:text-blue-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -410,18 +1385,17 @@ exports[`Button - Component Should render disabledAppearance of buttons - dull 1
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render disabledAppearance of buttons - none 1`] = `
+exports[`Button Should render palette of buttons - secondary 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
-    aria-disabled="true"
+    aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledPointer"
+    class="buttonReset button bg-grey-65 hover:bg-grey-55 focus:bg-grey-55 active:bg-grey-55 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -429,18 +1403,17 @@ exports[`Button - Component Should render disabledAppearance of buttons - none 1
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render disabledAppearance of buttons - strike 1`] = `
+exports[`Button Should render palette of buttons - secondaryLighter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
-    aria-disabled="true"
+    aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledPointer strike"
+    class="buttonReset button bg-grey-10 hover:bg-grey-20 focus:bg-grey-20 active:bg-grey-20 text-grey-65 hover:text-grey-100 focus:text-grey-100 active:text-grey-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -448,152 +1421,71 @@ exports[`Button - Component Should render disabledAppearance of buttons - strike
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render loaderPlacement of buttons - end 1`] = `
+exports[`Button Should render palette of buttons - success 1`] = `
 <DocumentFragment>
   <button
-    aria-busy="true"
-    aria-disabled="true"
+    aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
+    class="buttonReset button bg-green-80 hover:bg-green-100 focus:bg-green-100 active:bg-green-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
-    >
-      <div
-        class="flex row alignItems_center justifyContent_center"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <svg
-          aria-hidden="true"
-          class="spinner"
-          role="img"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            class="spinnerTrack"
-            cx="12"
-            cy="12"
-            r="10"
-          />
-          <circle
-            class="spinnerHead"
-            cx="12"
-            cy="12"
-            r="10"
-          />
-        </svg>
-      </div>
-    </div>
+    />
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render loaderPlacement of buttons - overlay 1`] = `
+exports[`Button Should render palette of buttons - successLighter 1`] = `
 <DocumentFragment>
   <button
-    aria-busy="true"
-    aria-disabled="true"
+    aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
+    class="buttonReset button bg-green-10 hover:bg-green-30 focus:bg-green-30 active:bg-green-30 text-green-80 hover:text-green-100 focus:text-green-100 active:text-green-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink overlayHidden"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
-    <div
-      class="flex row alignItems_center justifyContent_center loaderOverlay"
-      data-id="flex"
-      data-test-id="flex"
-    >
-      <svg
-        aria-hidden="true"
-        class="spinner"
-        role="img"
-        viewBox="0 0 24 24"
-      >
-        <circle
-          class="spinnerTrack"
-          cx="12"
-          cy="12"
-          r="10"
-        />
-        <circle
-          class="spinnerHead"
-          cx="12"
-          cy="12"
-          r="10"
-        />
-      </svg>
-    </div>
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render loaderPlacement of buttons - start 1`] = `
+exports[`Button Should render palette of buttons - warning 1`] = `
 <DocumentFragment>
   <button
-    aria-busy="true"
-    aria-disabled="true"
+    aria-busy="false"
+    aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
+    class="buttonReset button bg-orange-80 hover:bg-orange-100 focus:bg-orange-100 active:bg-orange-100 text-white hover:text-white focus:text-white active:text-white border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
-    >
-      <div
-        class="flex row alignItems_center justifyContent_center"
-        data-id="flex"
-        data-test-id="flex"
-      >
-        <svg
-          aria-hidden="true"
-          class="spinner"
-          role="img"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            class="spinnerTrack"
-            cx="12"
-            cy="12"
-            r="10"
-          />
-          <circle
-            class="spinnerHead"
-            cx="12"
-            cy="12"
-            r="10"
-          />
-        </svg>
-      </div>
-    </div>
+    />
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render palette of buttons - danger 1`] = `
+exports[`Button Should render palette of buttons - warningLighter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-red-70 text-white border-red-70 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button bg-orange-10 hover:bg-orange-15 focus:bg-orange-15 active:bg-orange-15 text-orange-80 hover:text-orange-100 focus:text-orange-100 active:text-orange-100 border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -601,18 +1493,17 @@ exports[`Button - Component Should render palette of buttons - danger 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render palette of buttons - default 1`] = `
+exports[`Button Should render selectedAppearance of buttons - { bg: false, border: true } 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
-    aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    aria-pressed="true"
+    class="buttonReset button bg-brand-80 selected:text-brand-filled selected:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -620,18 +1511,17 @@ exports[`Button - Component Should render palette of buttons - default 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render palette of buttons - primary 1`] = `
+exports[`Button Should render selectedAppearance of buttons - { bg: true, text: 'black' } 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
-    aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-blue-80 text-white border-blue-80 sizeMedium shapeRoundedRectangle"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-brand-80 selected:text-black border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -639,18 +1529,17 @@ exports[`Button - Component Should render palette of buttons - primary 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render palette of buttons - secondary 1`] = `
+exports[`Button Should render selectedAppearance of buttons - { border: true } 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
-    aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-grey-65 text-white border-grey-65 sizeMedium shapeRoundedRectangle"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-brand-80 selected:text-brand-filled selected:border-brand-80 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -658,18 +1547,17 @@ exports[`Button - Component Should render palette of buttons - secondary 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render palette of buttons - success 1`] = `
+exports[`Button Should render selectedAppearance of buttons - { text: true } 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
-    aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-green-80 text-white border-green-80 sizeMedium shapeRoundedRectangle"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-brand-80 selected:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -677,18 +1565,17 @@ exports[`Button - Component Should render palette of buttons - success 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render paletteShade of buttons - default 1`] = `
+exports[`Button Should render selectedAppearance of buttons - {} 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
-    aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-brand-80 selected:text-brand-filled border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -696,18 +1583,17 @@ exports[`Button - Component Should render paletteShade of buttons - default 1`]
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render paletteShade of buttons - lighter 1`] = `
+exports[`Button Should render shape of buttons - pill 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-10 text-brand-80 border-brand-10 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapePill variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -715,18 +1601,17 @@ exports[`Button - Component Should render paletteShade of buttons - lighter 1`]
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render shape of buttons - pill 1`] = `
+exports[`Button Should render shape of buttons - rectangle 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapePill"
+    class="buttonReset button border-transparent sizeMedium shapeRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -734,18 +1619,17 @@ exports[`Button - Component Should render shape of buttons - pill 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render shape of buttons - rectangle 1`] = `
+exports[`Button Should render shape of buttons - roundedRectangle 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -753,37 +1637,51 @@ exports[`Button - Component Should render shape of buttons - rectangle 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render shape of buttons - roundedRectangle 1`] = `
+exports[`Button Should render success overlay when status is success and loaderPlacement is overlay 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink overlayHidden"
       data-id="flex"
       data-test-id="flex"
     />
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center successOverlay"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <svg
+        aria-hidden="true"
+        class="tick"
+        role="img"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M4 12l5 5L20 6"
+        />
+      </svg>
+    </div>
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render type of buttons - button 1`] = `
+exports[`Button Should render type of buttons - button 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -791,18 +1689,17 @@ exports[`Button - Component Should render type of buttons - button 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render type of buttons - reset 1`] = `
+exports[`Button Should render type of buttons - reset 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="reset"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -810,18 +1707,17 @@ exports[`Button - Component Should render type of buttons - reset 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render type of buttons - submit 1`] = `
+exports[`Button Should render type of buttons - submit 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="submit"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -829,18 +1725,17 @@ exports[`Button - Component Should render type of buttons - submit 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render variant of buttons - icon 1`] = `
+exports[`Button Should render variant of buttons - icon 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIcon"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -848,18 +1743,17 @@ exports[`Button - Component Should render variant of buttons - icon 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render variant of buttons - iconWithText 1`] = `
+exports[`Button Should render variant of buttons - iconWithText 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIconWithText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -867,18 +1761,17 @@ exports[`Button - Component Should render variant of buttons - iconWithText 1`]
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render variant of buttons - text 1`] = `
+exports[`Button Should render variant of buttons - text 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -886,18 +1779,17 @@ exports[`Button - Component Should render variant of buttons - text 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with children 1`] = `
+exports[`Button Should render with children 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -911,20 +1803,19 @@ exports[`Button - Component Should render with children 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with customId and testId 1`] = `
+exports[`Button Should render with customId and testId 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     data-id="customIdValue"
     data-test-id="testIdValue"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -932,96 +1823,95 @@ exports[`Button - Component Should render with customId and testId 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with iconName and iconSize  1`] = `
+exports[`Button Should render with dataSelectorId 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
+    data-selector-id="selectorId"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
-    >
-      <i
-        aria-hidden="true"
-        class="zd_font_icons basic icon-plus"
-        data-id="fontIcon"
-        data-selector-id="fontIcon"
-        style="--zd-iconfont-size: var(--zd_font_size20);"
-      />
-    </div>
+    />
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with iconPlacement  1`] = `
+exports[`Button Should render with iconName and iconSize 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIcon"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     >
-      <div
-        class="dotted size13"
-      >
-        Button
-      </div>
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-plus"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle"
         data-id="fontIcon"
         data-selector-id="fontIcon"
-        style="--zd-iconfont-size: var(--zd_font_size16);"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size20);"
       />
     </div>
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with readOnly style when isReadOnly prop is true 1`] = `
+exports[`Button Should render with iconPlacement 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="true"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle disabledOpac disabledPointer"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIconWithText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
-    />
+    >
+      <div
+        class="dotted size13"
+      >
+        Button
+      </div>
+      <i
+        aria-hidden="true"
+        class="zd_font_icons ff icon-plus basic d-inline-block d-align-middle"
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size16);"
+      />
+    </div>
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with renderBefore and renderAfter 1`] = `
+exports[`Button Should render with renderBefore and renderAfter 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -1041,18 +1931,17 @@ exports[`Button - Component Should render with renderBefore and renderAfter 1`]
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with renderIcon 1`] = `
+exports[`Button Should render with renderIcon 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantIcon"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     >
@@ -1064,62 +1953,71 @@ exports[`Button - Component Should render with renderIcon 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with renderLoader 1`] = `
+exports[`Button Should render with renderLoader 1`] = `
 <DocumentFragment>
   <button
     aria-busy="true"
     aria-disabled="true"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle loading"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText loading"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink overlayHidden"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink overlayHidden"
       data-id="flex"
       data-test-id="flex"
     />
-    <span>
-      Loading...
-    </span>
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center loaderOverlay"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <span>
+        Loading...
+      </span>
+    </div>
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with renderSuccess 1`] = `
+exports[`Button Should render with renderSuccess 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink overlayHidden"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink overlayHidden"
       data-id="flex"
       data-test-id="flex"
     />
-    <span>
-      Success!
-    </span>
+    <div
+      class="d-flex d-flex-row d-items-center d-justify-center successOverlay"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <span>
+        Success!
+      </span>
+    </div>
   </button>
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with selected style when isSelected prop is true 1`] = `
+exports[`Button Should render with selected style when isSelected prop is true 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="true"
-    aria-readonly="false"
-    class="buttonReset button sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -1127,18 +2025,17 @@ exports[`Button - Component Should render with selected style when isSelected pr
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with the basic set of default props 1`] = `
+exports[`Button Should render with the basic set of default props 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />
@@ -1146,19 +2043,18 @@ exports[`Button - Component Should render with the basic set of default props 1`
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render with title attribute 1`] = `
+exports[`Button Should render with title attribute 1`] = `
 <DocumentFragment>
   <button
     aria-busy="false"
     aria-disabled="false"
     aria-pressed="false"
-    aria-readonly="false"
-    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle"
+    class="buttonReset button border-transparent sizeMedium shapeRoundedRectangle variantText"
     data-title="Button test title"
     type="button"
   >
     <div
-      class="flex row alignItems_center justifyContent_center shrink contentWrapper"
+      class="d-flex d-flex-row d-items-center d-justify-center d-min-w-0 d-flex-shrink contentWrapper"
       data-id="flex"
       data-test-id="flex"
     />