@zohodesk/components 1.0.0-temp-257.1 → 1.0.0-temp-259.2

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

@@ -5,15 +5,13 @@ exports[`Button - Component Should apply a11yAttributes to the button 1`] = `
   <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 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 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"
     >
@@ -31,14 +29,12 @@ exports[`Button - Component Should apply customClass to wrapper, text and 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 customButtonClass"
+    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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantIconWithText customButtonClass"
     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"
     >
@@ -63,14 +59,12 @@ exports[`Button - Component Should apply customProps to wrapper, text and 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 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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     >
@@ -88,14 +82,15 @@ exports[`Button - Component Should be disabled when isDisabled prop is true 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 bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText disabledOpac disabledPointer"
+    data-id="undefined_disabled"
+    data-test-id="undefined_disabled"
+    disabled=""
     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"
     />
@@ -107,14 +102,12 @@ exports[`Button - Component Should render Sizes of buttons - full 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 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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeFull 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"
     />
@@ -126,14 +119,12 @@ exports[`Button - Component Should render Sizes of buttons - large 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-brand-filled focus:text-brand-filled active:text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeLarge 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"
     />
@@ -145,14 +136,12 @@ exports[`Button - Component Should render Sizes of buttons - medium 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-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"
     />
@@ -164,14 +153,12 @@ exports[`Button - Component Should render Sizes of buttons - small 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-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeSmall 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"
     />
@@ -183,14 +170,12 @@ exports[`Button - Component Should render Status of buttons - default 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-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"
     />
@@ -202,19 +187,18 @@ exports[`Button - Component Should render Status of buttons - loading 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 bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText loading"
+    disabled=""
     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"
     >
@@ -246,19 +230,17 @@ exports[`Button - Component Should render Status of buttons - success 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-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 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 successOverlay"
       data-id="flex"
       data-test-id="flex"
     >
@@ -277,18 +259,16 @@ exports[`Button - Component Should render Status of buttons - success 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render bgAppearance of buttons - default 1`] = `
+exports[`Button - Component Should render appearance of buttons - [ 'bg' ] 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-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"
     />
@@ -296,18 +276,16 @@ exports[`Button - Component Should render bgAppearance of buttons - default 1`]
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render bgAppearance of buttons - none 1`] = `
+exports[`Button - Component Should render appearance of buttons - [ 'bg', 'border' ] 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-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"
     />
@@ -315,18 +293,16 @@ exports[`Button - Component Should render bgAppearance of buttons - none 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render bgAppearance of buttons - onHover 1`] = `
+exports[`Button - Component Should render appearance of buttons - [ 'border' ] 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 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled 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"
     />
@@ -334,18 +310,73 @@ exports[`Button - Component Should render bgAppearance of buttons - onHover 1`]
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render borderAppearance of buttons - default 1`] = `
+exports[`Button - Component Should render appearance 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 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 text-brand-80 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent 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"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render appearance of buttons - [] 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-pressed="false"
+    class="buttonReset button hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled border-transparent 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"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render disabledAppearance of buttons - dull 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-pressed="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText disabledOpac disabledPointer"
+    data-id="undefined_disabled"
+    data-test-id="undefined_disabled"
+    disabled=""
+    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 - Component Should render disabledAppearance of buttons - none 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-pressed="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText disabledPointer"
+    data-id="undefined_disabled"
+    data-test-id="undefined_disabled"
+    disabled=""
+    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"
     />
@@ -353,14 +384,15 @@ exports[`Button - Component Should render borderAppearance of buttons - default
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render borderAppearance of buttons - none 1`] = `
+exports[`Button - Component Should render disabledAppearance of buttons - strike 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-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText disabledPointer strike"
+    data-id="undefined_disabled"
+    data-test-id="undefined_disabled"
+    disabled=""
     type="button"
   >
     <div
@@ -372,14 +404,12 @@ exports[`Button - Component Should render borderAppearance of buttons - none 1`]
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render borderAppearance of buttons - onHover 1`] = `
+exports[`Button - Component Should render hoverAppearance of buttons - [ 'bg' ] 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-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 hover:border-transparent focus:border-transparent active:border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -391,14 +421,12 @@ exports[`Button - Component Should render borderAppearance of buttons - onHover
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render disabledAppearance of buttons - dull 1`] = `
+exports[`Button - Component Should render hoverAppearance of buttons - [ 'bg', 'border' ] 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 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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -410,14 +438,12 @@ exports[`Button - Component Should render disabledAppearance of buttons - dull 1
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render disabledAppearance of buttons - none 1`] = `
+exports[`Button - Component Should render hoverAppearance of buttons - [ 'border' ] 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 disabledPointer"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -429,14 +455,12 @@ exports[`Button - Component Should render disabledAppearance of buttons - none 1
 </DocumentFragment>
 `;
 
-exports[`Button - Component Should render disabledAppearance of buttons - strike 1`] = `
+exports[`Button - Component Should render hoverAppearance of buttons - [ 'text' ] 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 disabledPointer strike"
+    class="buttonReset button bg-brand-80 text-brand-filled hover:text-brand-100 focus:text-brand-100 active:text-brand-100 border-brand-80 hover:border-transparent focus:border-transparent active:border-transparent sizeMedium shapeRoundedRectangle variantText"
     type="button"
   >
     <div
@@ -448,23 +472,39 @@ exports[`Button - Component Should render disabledAppearance of buttons - strike
 </DocumentFragment>
 `;
 
+exports[`Button - Component Should render hoverAppearance of buttons - [] 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-pressed="false"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 hover:border-transparent focus:border-transparent active: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 - Component Should render loaderPlacement of buttons - end 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 bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText loading"
+    disabled=""
     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"
+        class="d-flex d-flex-row d-items-center d-justify-center"
         data-id="flex"
         data-test-id="flex"
       >
@@ -497,19 +537,18 @@ exports[`Button - Component 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 loading"
+    class="buttonReset button bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText loading"
+    disabled=""
     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"
     >
@@ -541,19 +580,18 @@ exports[`Button - Component Should render loaderPlacement of buttons - start 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 bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText loading"
+    disabled=""
     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"
+        class="d-flex d-flex-row d-items-center d-justify-center"
         data-id="flex"
         data-test-id="flex"
       >
@@ -586,14 +624,12 @@ exports[`Button - Component 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-red-70 text-white border-red-70 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-red-70 hover:border-red-100 focus:border-red-100 active:border-red-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"
     />
@@ -605,14 +641,12 @@ exports[`Button - Component Should render palette of buttons - default 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-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"
     />
@@ -624,14 +658,12 @@ exports[`Button - Component Should render palette of buttons - primary 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"
+    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-blue-80 hover:border-blue-100 focus:border-blue-100 active:border-blue-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"
     />
@@ -643,14 +675,12 @@ exports[`Button - Component Should render palette of buttons - secondary 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"
+    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-grey-65 hover:border-grey-55 focus:border-grey-55 active:border-grey-55 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"
     />
@@ -662,14 +692,12 @@ exports[`Button - Component Should render palette of buttons - success 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"
+    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-green-80 hover:border-green-100 focus:border-green-100 active:border-green-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"
     />
@@ -681,14 +709,12 @@ exports[`Button - Component Should render paletteShade of buttons - default 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-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"
     />
@@ -700,10 +726,8 @@ exports[`Button - Component Should render paletteShade of buttons - lighter 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 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
@@ -715,18 +739,101 @@ exports[`Button - Component Should render paletteShade of buttons - lighter 1`]
 </DocumentFragment>
 `;
 
+exports[`Button - Component Should render selectedAppearance of buttons - [ 'bg' ] 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-brand-100 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 selected:text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-transparent 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"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render selectedAppearance of buttons - [ 'bg', 'border' ] 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-pressed="true"
+    class="buttonReset button selected:bg-brand-100 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 selected:text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-brand-100 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"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render selectedAppearance of buttons - [ 'border' ] 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-pressed="true"
+    class="buttonReset button hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-brand-100 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"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render selectedAppearance of buttons - [ 'text' ] 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-pressed="true"
+    class="buttonReset button hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 selected:text-brand-100 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-transparent 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"
+      data-id="flex"
+      data-test-id="flex"
+    />
+  </button>
+</DocumentFragment>
+`;
+
+exports[`Button - Component Should render selectedAppearance of buttons - [] 1`] = `
+<DocumentFragment>
+  <button
+    aria-busy="false"
+    aria-pressed="true"
+    class="buttonReset button hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-transparent 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"
+    />
+  </button>
+</DocumentFragment>
+`;
+
 exports[`Button - Component 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-80 text-brand-filled border-brand-80 sizeMedium shapePill"
+    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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     />
@@ -738,14 +845,12 @@ exports[`Button - Component 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 shapeRectangle"
+    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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     />
@@ -757,14 +862,12 @@ exports[`Button - Component 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 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-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"
     />
@@ -776,14 +879,12 @@ exports[`Button - Component 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 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 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"
     />
@@ -795,14 +896,12 @@ exports[`Button - Component 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 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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     />
@@ -814,14 +913,12 @@ exports[`Button - Component 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 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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     />
@@ -833,14 +930,12 @@ exports[`Button - Component 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 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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     />
@@ -852,14 +947,12 @@ exports[`Button - Component 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 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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     />
@@ -871,14 +964,12 @@ exports[`Button - Component 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 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 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"
     />
@@ -890,14 +981,12 @@ exports[`Button - Component 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 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 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"
     >
@@ -915,16 +1004,14 @@ exports[`Button - Component 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 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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     />
@@ -936,14 +1023,12 @@ exports[`Button - Component 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 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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     >
@@ -963,14 +1048,12 @@ exports[`Button - Component Should render with iconPlacement  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-brand-80 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     >
@@ -995,14 +1078,12 @@ exports[`Button - Component Should render with readOnly style when isReadOnly pr
 <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 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 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"
     />
@@ -1014,14 +1095,12 @@ exports[`Button - Component 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 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 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"
     >
@@ -1045,14 +1124,12 @@ exports[`Button - Component 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 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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     >
@@ -1068,20 +1145,25 @@ exports[`Button - Component 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 bg-brand-80 text-brand-filled border-brand-80 sizeMedium shapeRoundedRectangle variantText loading"
+    disabled=""
     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="flex row alignItems_center justifyContent_center loaderOverlay"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <span>
+        Loading...
+      </span>
+    </div>
   </button>
 </DocumentFragment>
 `;
@@ -1090,20 +1172,24 @@ exports[`Button - Component 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 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 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 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="flex row alignItems_center justifyContent_center successOverlay"
+      data-id="flex"
+      data-test-id="flex"
+    >
+      <span>
+        Success!
+      </span>
+    </div>
   </button>
 </DocumentFragment>
 `;
@@ -1112,14 +1198,12 @@ exports[`Button - Component Should render with selected style when isSelected pr
 <DocumentFragment>
   <button
     aria-busy="false"
-    aria-disabled="false"
     aria-pressed="true"
-    aria-readonly="false"
-    class="buttonReset button sizeMedium shapeRoundedRectangle"
+    class="buttonReset button selected:bg-brand-100 hover:bg-brand-100 focus:bg-brand-100 active:bg-brand-100 selected:text-brand-filled hover:text-brand-filled focus:text-brand-filled active:text-brand-filled selected:border-brand-100 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"
     />
@@ -1131,14 +1215,12 @@ exports[`Button - Component 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 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 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"
     />
@@ -1150,15 +1232,13 @@ exports[`Button - Component 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 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 hover:border-brand-100 focus:border-brand-100 active:border-brand-100 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"
     />