From 05f00ebe4e322a6262f8f0dadd0c6178be331262 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bryan.cunningham@me.com>
Date: Thu, 22 Jan 2026 09:33:04 -0500
Subject: [PATCH] add more explicit screenshots

---
 .storybook/preview.tsx                        |   2 +-
 .../src/button/button.component.html          |   3 +-
 libs/components/src/button/button.stories.ts  | 240 ++++++++++++++++--
 3 files changed, 228 insertions(+), 17 deletions(-)

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 266cf79d8b1..699520d8f15 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -9,7 +9,7 @@ setCompodocJson(docJson);
 
 const wrapperDecorator = componentWrapperDecorator((story) => {
   return /*html*/ `
-    <div class="tw-bg-background tw-px-5 tw-py-10 tw-@container">
+    <div class="tw-bg-bg-primary tw-px-5 tw-py-10 tw-@container">
       ${story}
     </div>
   `;
diff --git a/libs/components/src/button/button.component.html b/libs/components/src/button/button.component.html
index 26e0c3b4d3d..3116a7387f5 100644
--- a/libs/components/src/button/button.component.html
+++ b/libs/components/src/button/button.component.html
@@ -1,5 +1,6 @@
 <span class="tw-relative">
-  <span [ngClass]="{ 'tw-invisible': showLoadingStyle() }">
+  <!-- tw-text-[inherit] is necessary for axe to correctly tests the contrast ratio-->
+  <span class="tw-text-[inherit]" [ngClass]="{ 'tw-invisible': showLoadingStyle() }">
     <ng-content></ng-content>
   </span>
   @if (showLoadingStyle()) {
diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts
index 4184ba92897..f6af20e0278 100644
--- a/libs/components/src/button/button.stories.ts
+++ b/libs/components/src/button/button.stories.ts
@@ -146,6 +146,14 @@ export const AllVariants: Story = {
       </div>
     `,
   }),
+  parameters: {
+    chromatic: {
+      modes: {
+        light: { theme: "light" },
+        dark: { theme: "dark" },
+      },
+    },
+  },
 };
 
 const sizeTemplate = /*html*/ `
@@ -281,23 +289,225 @@ export const InteractionStates: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-    <div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
-      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Button</button>
-      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
-      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
-      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
-      <button type="button" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
-    </div>
-    <div class="tw-flex tw-gap-4 tw-items-center">
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Anchor</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+    <div class="tw-flex tw-flex-col tw-gap-8">
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="secondary" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtle" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtle" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtle" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtle" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtle" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtle" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtle" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtle" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtle" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtle" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleOutline" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleOutline" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleOutline" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleOutline" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleOutline" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleOutline" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleOutline" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleOutline" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleOutline" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleOutline" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleGhost" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleGhost" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleGhost" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleGhost" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleGhost" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleGhost" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleGhost" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleGhost" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleGhost" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="subtleGhost" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerOutline" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerOutline" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerOutline" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerOutline" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerOutline" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerOutline" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerOutline" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerOutline" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerOutline" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerOutline" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerGhost" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerGhost" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerGhost" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerGhost" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerGhost" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerGhost" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerGhost" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerGhost" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerGhost" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="dangerGhost" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warning" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warning" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warning" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warning" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warning" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warning" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warning" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warning" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warning" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warning" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningOutline" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningOutline" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningOutline" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningOutline" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningOutline" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningOutline" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningOutline" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningOutline" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningOutline" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningOutline" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningGhost" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningGhost" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningGhost" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningGhost" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningGhost" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningGhost" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningGhost" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningGhost" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningGhost" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="warningGhost" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="success" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="success" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="success" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="success" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="success" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="success" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="success" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="success" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="success" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="success" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successOutline" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successOutline" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successOutline" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successOutline" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successOutline" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="successOutline" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="successOutline" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="successOutline" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="successOutline" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="successOutline" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
+
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successGhost" [size]="size" [block]="block">Button</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successGhost" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successGhost" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successGhost" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+        <button type="button" bitButton [disabled]="disabled" [loading]="loading" buttonType="successGhost" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+      </div>
+      <div class="tw-flex tw-gap-4 tw-items-center">
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="successGhost" [size]="size" [block]="block">Anchor</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="successGhost" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="successGhost" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="successGhost" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+        <a href="#" bitButton [disabled]="disabled" [loading]="loading" buttonType="successGhost" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+      </div>
     </div>
     `,
   }),
-  args: {
-    buttonType: "primary",
+  parameters: {
+    chromatic: {
+      modes: {
+        light: { theme: "light" },
+        dark: { theme: "dark" },
+      },
+    },
   },
 };