@ukic/web-components 2.35.2 → 3.0.0-alpha.10

package/dist/collection/components/ic-button/ic-button.stories.js

@@ -4,11 +4,13 @@ const defaultArgs = {
   message: "Custom Button",
   disabled: false,
   loading: false,
-  appearance: "default",
-  size: "default",
+  theme: "inherit",
+  size: "medium",
   variant: "secondary",
   fullWidth: true,
   iconPlacement: "right-icon",
+  monochrome: false,
+  dropdown: false,
 };
 
 export default {
@@ -17,287 +19,343 @@ export default {
 };
 
 export const Primary = {
-  render: () => html`
-    <div style="padding: 6px">
-      <ic-button variant="primary" id="mybuttonid" onclick="alert('test')"
-        >Button</ic-button
-      >
-      <ic-button variant="primary" disabled onclick="alert('test')"
-        >Button</ic-button
-      >
-    </div>
-    <div style="padding: 6px">
-      <ic-button variant="primary" appearance="dark" onclick="alert('test')"
-        >Button</ic-button
-      >
-      <ic-button
-        variant="primary"
-        disabled
-        appearance="dark"
-        onclick="alert('test')"
-        >Button</ic-button
-      >
-    </div>
-    <div style="background-color:#2c2f34; padding:6px 10px; width:fit-content">
-      <ic-button variant="primary" appearance="light" onclick="alert('test')"
-        >Button</ic-button
+  render: () =>
+    html`<div
+        style="display: flex; flex-direction: row; width: fit-content; background-color: #ececec;"
       >
-      <ic-button variant="primary" disabled appearance="light"
-        >Button</ic-button
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large"> Light theme </ic-typography>
+          <div>
+            <ic-button variant="primary" theme="light" id="mybuttonid">
+              Primary
+            </ic-button>
+            <ic-button variant="primary" theme="light" disabled>
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large">
+            Light theme - monochrome
+          </ic-typography>
+          <div>
+            <ic-button variant="primary" monochrome theme="light">
+              Monochrome
+            </ic-button>
+            <ic-button variant="primary" disabled monochrome theme="light">
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+      </div>
+      <div
+        style="display: flex; flex-direction: row; margin-top: 1rem; background-color:#474A48; border-radius: 5px; width:fit-content;"
       >
-    </div>
-  `,
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large" style="color: white">
+            Dark theme
+          </ic-typography>
+          <div>
+            <ic-button variant="primary" theme="dark" id="mybuttonid">
+              Primary
+            </ic-button>
+            <ic-button variant="primary" theme="dark" disabled>
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large" style="color: white">
+            Dark theme - monochrome
+          </ic-typography>
+          <div>
+            <ic-button variant="primary" monochrome theme="dark">
+              Monochrome
+            </ic-button>
+            <ic-button variant="primary" disabled monochrome theme="dark">
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+      </div>`,
 
   name: "Primary",
 };
 
-export const RouterLink = {
+export const Secondary = {
   render: () =>
-    html`<div style="padding: 8px">
-        <ic-button size="small">
-          <a slot="router-item" href="/">Slotted link</a>
-        </ic-button>
-        <ic-button>
-          <a slot="router-item" href="/">Slotted link</a>
-        </ic-button>
-        <ic-button size="large">
-          <a slot="router-item" href="/">Slotted link</a>
-        </ic-button>
-      </div>
-      <div style="padding: 8px">
-        <ic-button disabled="true">
-          <a slot="router-item" href="/">Slotted link</a>
-        </ic-button>
-        <ic-button variant="secondary">
-          <a slot="router-item" href="/">Slotted link</a>
-        </ic-button>
-        <ic-button variant="tertiary">
-          <a slot="router-item" href="/">Slotted link</a>
-        </ic-button>
-        <ic-button variant="destructive">
-          <a slot="router-item" href="/">Slotted link</a>
-        </ic-button>
-        <ic-button variant="icon">
-          <a slot="router-item" href="/">
-            <svg
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
+    html` <div
+        style="display: flex; flex-direction: row; width: fit-content; background-color: #ececec;"
+      >
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large"> Light theme </ic-typography>
+          <div>
+            <ic-button variant="secondary" theme="light" id="mybuttonid">
+              Secondary
+            </ic-button>
+            <ic-button variant="secondary" theme="light" disabled>
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large">
+            Light theme - monochrome
+          </ic-typography>
+          <div>
+            <ic-button variant="secondary" monochrome theme="light">
+              Monochrome
+            </ic-button>
+            <ic-button variant="secondary" disabled monochrome theme="light">
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large">
+            Light theme - non-transparent
+          </ic-typography>
+          <div>
+            <ic-button
+              variant="secondary"
+              transparent-background="false"
+              theme="light"
             >
-              <path
-                d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
-                fill="currentColor"
-              />
-            </svg>
-          </a>
-        </ic-button>
+              Solid
+            </ic-button>
+            <ic-button
+              variant="secondary"
+              disabled
+              theme="light"
+              transparent-background="false"
+            >
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large">
+            Light theme - monochrome, non-transparent
+          </ic-typography>
+          <div>
+            <ic-button
+              variant="secondary"
+              theme="light"
+              monochrome
+              transparent-background="false"
+            >
+              Mono-Solid
+            </ic-button>
+            <ic-button
+              variant="secondary"
+              disabled
+              monochrome
+              theme="light"
+              transparent-background="false"
+            >
+              Disabled
+            </ic-button>
+          </div>
+        </div>
       </div>
-      <div style="padding: 8px">
-        <ic-button appearance="light">
-          <a slot="router-item" href="/">Slotted link</a>
-        </ic-button>
-        <ic-button appearance="dark">
-          <a slot="router-item" href="/">Slotted link</a>
-        </ic-button>
-      </div>`,
-
-  name: "Router link",
-
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const Secondary = {
-  render: () => html`
-    <div style="padding: 6px">
-      <ic-button variant="secondary">Button</ic-button>
-      <ic-button variant="secondary" disabled>Button</ic-button>
-      <ic-button variant="secondary" transparent-background="false"
-        >Button</ic-button
-      >
-    </div>
-    <div style="padding: 6px">
-      <ic-button variant="secondary" appearance="dark">Button</ic-button>
-      <ic-button variant="secondary" disabled appearance="dark"
-        >Button</ic-button
-      >
-      <ic-button
-        variant="secondary"
-        appearance="dark"
-        transparent-background="false"
-        >Button</ic-button
-      >
-    </div>
-    <div style="background-color:#2c2f34; padding:6px 10px; width:fit-content">
-      <ic-button variant="secondary" appearance="light">Button</ic-button>
-      <ic-button variant="secondary" disabled appearance="light"
-        >Button</ic-button
-      >
-      <ic-button variant="secondary" transparent-background="false"
-        >Button</ic-button
+      <div
+        style="display: flex; flex-direction: row; margin-top: 1rem; background-color:#474A48; border-radius: 5px; width:fit-content;"
       >
-    </div>
-  `,
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large" style="color: white">
+            Dark theme
+          </ic-typography>
+          <div>
+            <ic-button variant="secondary" theme="dark" id="mybuttonid">
+              Secondary
+            </ic-button>
+            <ic-button variant="secondary" theme="dark" disabled>
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large" style="color: white">
+            Dark theme - monochrome
+          </ic-typography>
+          <div>
+            <ic-button variant="secondary" monochrome theme="dark">
+              Monochrome
+            </ic-button>
+            <ic-button variant="secondary" disabled monochrome theme="dark">
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+      </div>`,
 
   name: "Secondary",
 };
 
 export const Tertiary = {
-  render: () => html`
-    <div style="padding: 6px">
-      <ic-button variant="tertiary">Button</ic-button>
-      <ic-button variant="tertiary" disabled>Button</ic-button>
-    </div>
-    <div style="padding: 6px">
-      <ic-button variant="tertiary" appearance="dark">Button</ic-button>
-      <ic-button variant="tertiary" disabled appearance="dark"
-        >Button</ic-button
+  render: () =>
+    html` <div
+        style="display: flex; flex-direction: row; width: fit-content; background-color: #ececec;"
       >
-    </div>
-    <div style="background-color:#2c2f34; padding:6px 10px; width:fit-content">
-      <ic-button variant="tertiary" appearance="light">Button</ic-button>
-      <ic-button variant="tertiary" disabled appearance="light"
-        >Button</ic-button
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large"> Light theme </ic-typography>
+          <div>
+            <ic-button variant="tertiary" theme="light" id="mybuttonid">
+              Tertiary
+            </ic-button>
+            <ic-button variant="tertiary" theme="light" disabled>
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large">
+            Light theme - monochrome
+          </ic-typography>
+          <div>
+            <ic-button variant="tertiary" theme="light" monochrome>
+              Monochrome
+            </ic-button>
+            <ic-button variant="tertiary" disabled monochrome theme="light">
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+      </div>
+      <div
+        style="display: flex; flex-direction: row; margin-top: 1rem; background-color:#474A48; border-radius: 5px; width:fit-content;"
       >
-    </div>
-  `,
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large" style="color: white">
+            Dark theme
+          </ic-typography>
+          <div>
+            <ic-button variant="tertiary" theme="dark" id="mybuttonid">
+              Tertiary
+            </ic-button>
+            <ic-button variant="tertiary" theme="dark" disabled>
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large" style="color: white">
+            Dark theme - monochrome
+          </ic-typography>
+          <div>
+            <ic-button variant="tertiary" monochrome theme="dark">
+              Monochrome
+            </ic-button>
+            <ic-button variant="tertiary" disabled monochrome theme="dark">
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+      </div>`,
 
   name: "Tertiary",
 };
 
 export const Destructive = {
-  render: () => html`
-    <ic-button variant="destructive">Button</ic-button>
-    <ic-button variant="destructive" disabled>Button</ic-button>
-  `,
+  render: () =>
+    html` <div
+        style="display: flex; flex-direction: row; width: fit-content; background-color: #ececec;"
+      >
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large"> Light theme </ic-typography>
+          <div>
+            <ic-button variant="destructive" theme="light" id="mybuttonid">
+              Destructive
+            </ic-button>
+            <ic-button variant="destructive" theme="light" disabled>
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+      </div>
+      <div
+        style="display: flex; flex-direction: row; margin-top: 1rem; background-color:#474A48; border-radius: 5px; width:fit-content;"
+      >
+        <div
+          style="padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-typography variant="subtitle-large" style="color: white">
+            Dark theme
+          </ic-typography>
+          <div>
+            <ic-button variant="destructive" theme="dark" id="mybuttonid">
+              Destructive
+            </ic-button>
+            <ic-button variant="destructive" theme="dark" disabled>
+              Disabled
+            </ic-button>
+          </div>
+        </div>
+      </div>`,
 
   name: "Destructive",
 };
 
-export const WithIcon = {
+export const IconVariants = {
   render: () =>
-    html`<div>
-        <ic-button variant="primary"
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
+    html`<div style="display:flex; gap: 1rem; flex-direction:column;">
+      <div>
+        <ic-typography>Default</ic-typography>
+        <div style="display:flex; gap: 0.5rem">
+          <ic-button
+            variant="icon-primary"
+            aria-label="refresh"
+            id="testbutton"
           >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button variant="primary"
-          >Button
-          <div slot="left-icon">
             <svg
               xmlns="http://www.w3.org/2000/svg"
+              height="24px"
               viewBox="0 0 24 24"
-              fill="currentcolor"
+              width="24px"
+              fill="#000000"
             >
               <path d="M0 0h24v24H0V0z" fill="none" />
               <path
                 d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
               />
             </svg>
-          </div>
-        </ic-button>
-        <ic-button variant="secondary"
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button variant="tertiary"
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
+          </ic-button>
+          <ic-button
+            variant="icon-secondary"
+            aria-label="refresh"
+            id="testbutton"
           >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button appearance="dark"
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button variant="destructive"
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button variant="destructive" disabled
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <div
-          style="background-color:#2c2f34; display:inline-block; padding:6px 10px"
-        >
-          <ic-button variant="primary" appearance="light">
-            Button
             <svg
-              slot="left-icon"
               xmlns="http://www.w3.org/2000/svg"
               height="24px"
               viewBox="0 0 24 24"
@@ -310,10 +368,12 @@ export const WithIcon = {
               />
             </svg>
           </ic-button>
-          <ic-button variant="secondary" appearance="light">
-            Button
+          <ic-button
+            variant="icon-tertiary"
+            aria-label="refresh"
+            id="testbutton"
+          >
             <svg
-              slot="left-icon"
               xmlns="http://www.w3.org/2000/svg"
               height="24px"
               viewBox="0 0 24 24"
@@ -326,10 +386,12 @@ export const WithIcon = {
               />
             </svg>
           </ic-button>
-          <ic-button variant="tertiary" appearance="light">
-            Button
+          <ic-button
+            variant="icon-destructive"
+            aria-label="refresh"
+            id="testbutton"
+          >
             <svg
-              slot="left-icon"
               xmlns="http://www.w3.org/2000/svg"
               height="24px"
               viewBox="0 0 24 24"
@@ -345,124 +407,115 @@ export const WithIcon = {
         </div>
       </div>
       <div>
-        <ic-button variant="primary"
-          >Button
-          <svg
-            slot="right-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
+        <ic-typography>Small</ic-typography>
+        <div style="display:flex; gap: 0.5rem">
+          <ic-button
+            variant="icon-primary"
+            aria-label="refresh"
+            id="testbutton"
+            size="small"
           >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button variant="primary"
-          >Button
-          <div slot="right-icon">
             <svg
               xmlns="http://www.w3.org/2000/svg"
+              height="24px"
               viewBox="0 0 24 24"
-              fill="currentcolor"
+              width="24px"
+              fill="#000000"
             >
               <path d="M0 0h24v24H0V0z" fill="none" />
               <path
                 d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
               />
             </svg>
-          </div>
-        </ic-button>
-        <ic-button variant="secondary"
-          >Button
-          <svg
-            slot="right-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
+          </ic-button>
+          <ic-button
+            variant="icon-secondary"
+            aria-label="refresh"
+            id="testbutton"
+            size="small"
           >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button variant="tertiary"
-          >Button
-          <svg
-            slot="right-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+              />
+            </svg>
+          </ic-button>
+          <ic-button
+            variant="icon-tertiary"
+            aria-label="refresh"
+            id="testbutton"
+            size="small"
           >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button appearance="dark"
-          >Button
-          <svg
-            slot="right-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+              />
+            </svg>
+          </ic-button>
+          <ic-button
+            variant="icon-destructive"
+            aria-label="refresh"
+            id="testbutton"
+            size="small"
           >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button variant="destructive"
-          >Button
-          <svg
-            slot="right-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+              />
+            </svg>
+          </ic-button>
+        </div>
+      </div>
+      <div>
+        <ic-typography>Large</ic-typography>
+        <div style="display:flex; gap: 0.5rem">
+          <ic-button
+            variant="icon-primary"
+            aria-label="refresh"
+            id="testbutton"
+            size="large"
           >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button variant="destructive" disabled
-          >Button
-          <svg
-            slot="right-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+              />
+            </svg>
+          </ic-button>
+          <ic-button
+            variant="icon-secondary"
+            aria-label="refresh"
+            id="testbutton"
+            size="large"
           >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <div
-          style="background-color:#2c2f34; display:inline-block; padding:6px 10px"
-        >
-          <ic-button variant="primary" appearance="light">
-            Button
             <svg
-              slot="right-icon"
               xmlns="http://www.w3.org/2000/svg"
               height="24px"
               viewBox="0 0 24 24"
@@ -475,10 +528,13 @@ export const WithIcon = {
               />
             </svg>
           </ic-button>
-          <ic-button variant="secondary" appearance="light">
-            Button
+          <ic-button
+            variant="icon-tertiary"
+            aria-label="refresh"
+            id="testbutton"
+            size="large"
+          >
             <svg
-              slot="right-icon"
               xmlns="http://www.w3.org/2000/svg"
               height="24px"
               viewBox="0 0 24 24"
@@ -491,10 +547,13 @@ export const WithIcon = {
               />
             </svg>
           </ic-button>
-          <ic-button variant="tertiary" appearance="light">
-            Button
+          <ic-button
+            variant="icon-destructive"
+            aria-label="refresh"
+            id="testbutton"
+            size="large"
+          >
             <svg
-              slot="right-icon"
               xmlns="http://www.w3.org/2000/svg"
               height="24px"
               viewBox="0 0 24 24"
@@ -508,660 +567,16 @@ export const WithIcon = {
             </svg>
           </ic-button>
         </div>
-      </div> `,
-
-  name: "With icon",
-};
-
-export const Dropdown = {
-  render: () =>
-    html`<div>
-      <div style="padding: 6px">
-        <ic-button dropdown="true" variant="primary">Button</ic-button>
-        <ic-button dropdown="true" variant="primary"
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button dropdown="true" variant="secondary">Button</ic-button>
-        <ic-button dropdown="true" variant="tertiary">Button</ic-button>
-      </div>
-      <div style="padding: 6px">
-        <ic-button dropdown="true" disabled="true" variant="primary"
-          >Button</ic-button
-        >
-        <ic-button dropdown="true" disabled="true" variant="primary"
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button dropdown="true" disabled="true" variant="secondary"
-          >Button</ic-button
-        >
-        <ic-button dropdown="true" disabled="true" variant="tertiary"
-          >Button</ic-button
-        >
-      </div>
-      <div style="padding: 6px">
-        <ic-button dropdown="true" variant="primary" appearance="dark"
-          >Button</ic-button
-        >
-        <ic-button dropdown="true" appearance="dark" variant="primary"
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button dropdown="true" variant="secondary" appearance="dark"
-          >Button</ic-button
-        >
-        <ic-button dropdown="true" variant="tertiary" appearance="dark"
-          >Button</ic-button
-        >
-      </div>
-      <div
-        style="background-color:#2c2f34; padding:6px 10px; width:fit-content;"
-      >
-        <ic-button dropdown="true" variant="primary" appearance="light"
-          >Button</ic-button
-        >
-        <ic-button dropdown="true" appearance="light" variant="primary"
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button dropdown="true" variant="secondary" appearance="light"
-          >Button</ic-button
-        >
-        <ic-button
-          dropdown="true"
-          variant="tertiary"
-          appearance="light"
-          id="mybuttonid"
-          onclick="alert('test')"
-          >Button</ic-button
-        >
-      </div>
-      <div style="padding: 6px">
-        <ic-button dropdown="true" variant="primary" size="small"
-          >Button</ic-button
-        >
-        <ic-button dropdown="true" size="small" variant="primary"
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button dropdown="true" variant="secondary" size="small"
-          >Button</ic-button
-        >
-        <ic-button dropdown="true" variant="tertiary" size="small"
-          >Button</ic-button
-        >
-      </div>
-      <div style="padding: 6px">
-        <ic-button dropdown="true" variant="primary" size="large"
-          >Button</ic-button
-        >
-        <ic-button dropdown="true" size="large" variant="primary"
-          >Button
-          <svg
-            slot="left-icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            />
-          </svg>
-        </ic-button>
-        <ic-button dropdown="true" variant="secondary" size="large"
-          >Button</ic-button
-        >
-        <ic-button dropdown="true" variant="tertiary" size="large"
-          >Button</ic-button
-        >
-      </div>
-    </div>`,
-
-  name: "Dropdown",
-};
-
-export const DropdownExample = {
-  render: () =>
-    html`<script>
-        var icPopover = document.querySelector("#popover-menu");
-        var icButton = document.querySelector("#button-1");
-        function handleClick() {
-          icPopover.open = icButton.dropdownExpanded;
-        }
-        icPopover.addEventListener("icPopoverClosed", handleClose);
-        function handleClose() {
-          icButton.dropdownExpanded = icPopover.open;
-        }
-      </script>
-      <div>
-        <ic-button
-          dropdown="true"
-          variant="primary"
-          onclick="handleClick()"
-          id="button-1"
-          >Button</ic-button
-        >
-        <ic-popover-menu
-          anchor="button-1"
-          aria-label="popover"
-          id="popover-menu"
-        >
-          <ic-menu-item label="Copy code"></ic-menu-item>
-          <ic-menu-item label="Paste code"></ic-menu-item>
-          <ic-menu-item label="Actions"></ic-menu-item>
-        </ic-popover-menu>
-      </div>`,
-
-  name: "Dropdown example",
-};
-
-export const Size = {
-  render: () =>
-    html` <ic-button variant="primary" size="small">Small</ic-button>
-      <ic-button variant="primary">Default</ic-button>
-      <ic-button variant="primary" size="large">Large</ic-button>
-      <ic-button variant="primary" size="small"
-        >Small
-        <svg
-          slot="left-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          />
-        </svg>
-      </ic-button>
-      <ic-button variant="primary"
-        >Default
-        <svg
-          slot="left-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          />
-        </svg>
-      </ic-button>
-      <ic-button variant="primary" size="large"
-        >Large
-        <svg
-          slot="left-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          />
-        </svg>
-      </ic-button>`,
-
-  name: "Size",
-};
-
-export const IconWithoutViewBox = {
-  render: () =>
-    html`<ic-button variant="primary" size="small"
-        >Small
-        <svg
-          slot="left-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          />
-        </svg>
-      </ic-button>
-      <ic-button variant="primary"
-        >Default
-        <svg
-          slot="left-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          />
-        </svg>
-      </ic-button>
-      <ic-button variant="primary" size="large"
-        >Large
-        <svg
-          slot="left-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          />
-        </svg>
-      </ic-button>`,
-
-  name: "Icon without viewBox",
-};
-
-export const FullWidth = {
-  render: () => html`
-    <ic-button variant="primary" full-width="true"
-      >Button
-      <svg
-        slot="left-icon"
-        xmlns="http://www.w3.org/2000/svg"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        fill="#000000"
-      >
-        <path d="M0 0h24v24H0V0z" fill="none" />
-        <path
-          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-        />
-      </svg>
-    </ic-button>
-    <ic-button variant="secondary" full-width="true"
-      >Button
-      <svg
-        slot="left-icon"
-        xmlns="http://www.w3.org/2000/svg"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        fill="#000000"
-      >
-        <path d="M0 0h24v24H0V0z" fill="none" />
-        <path
-          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-        />
-      </svg>
-    </ic-button>
-    <ic-button variant="tertiary" full-width="true"
-      >Button
-      <svg
-        slot="left-icon"
-        xmlns="http://www.w3.org/2000/svg"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        fill="#000000"
-      >
-        <path d="M0 0h24v24H0V0z" fill="none" />
-        <path
-          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-        />
-      </svg>
-    </ic-button>
-    <ic-button appearance="dark" full-width="true"
-      >Button
-      <svg
-        slot="left-icon"
-        xmlns="http://www.w3.org/2000/svg"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        fill="#000000"
-      >
-        <path d="M0 0h24v24H0V0z" fill="none" />
-        <path
-          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-        />
-      </svg>
-    </ic-button>
-    <ic-button variant="destructive" full-width="true"
-      >Button
-      <svg
-        slot="left-icon"
-        xmlns="http://www.w3.org/2000/svg"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        fill="#000000"
-      >
-        <path d="M0 0h24v24H0V0z" fill="none" />
-        <path
-          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-        />
-      </svg>
-    </ic-button>
-    <ic-button variant="destructive" disabled full-width="true"
-      >Button
-      <svg
-        slot="left-icon"
-        xmlns="http://www.w3.org/2000/svg"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        fill="#000000"
-      >
-        <path d="M0 0h24v24H0V0z" fill="none" />
-        <path
-          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-        />
-      </svg>
-    </ic-button>
-    <div style="background-color:#2c2f34; padding:6px 10px,">
-      <ic-button variant="primary" appearance="light" full-width="true">
-        Button
-        <svg
-          slot="left-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          />
-        </svg>
-      </ic-button>
-      <ic-button variant="secondary" appearance="light" full-width="true">
-        Button
-        <svg
-          slot="left-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          />
-        </svg>
-      </ic-button>
-      <ic-button variant="tertiary" appearance="light" full-width="true">
-        Button
-        <svg
-          slot="left-icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          />
-        </svg>
-      </ic-button>
-    </div>
-  `,
-
-  name: "Full width",
-};
-
-export const MinWidth = {
-  render: () => html`
-    <style>
-      ic-button {
-        --min-width: 4rem;
-      }
-    </style>
-    <ic-button>Min</ic-button>
-    <ic-button variant="secondary">Min</ic-button>
-  `,
-
-  name: "Min width",
-};
-
-export const Height = {
-  render: () => html`
-    <style>
-      ic-button[name="tall-button"] {
-        --height: 9rem;
-      }
-    </style>
-    <ic-button name="tall-button">Tall Button</ic-button>
-    <ic-button variant="secondary" name="tall-button">Tall Button</ic-button>
-  `,
-
-  name: "Height",
-};
-
-export const IconOnly = {
-  render: () =>
-    html`<ic-button
-        variant="icon"
-        size="small"
-        aria-label="refresh"
-        id="testbutton"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          /></svg
-      ></ic-button>
-      <ic-button variant="icon" size="small" title="refresh but as a title"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          /></svg
-      ></ic-button>
-      <ic-button
-        variant="icon"
-        size="small"
-        aria-label="refresh label"
-        title="title alongside a label"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          /></svg
-      ></ic-button>
-      <ic-button variant="icon" aria-label="refresh"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          /></svg
-      ></ic-button>
-      <ic-button variant="icon" size="large" aria-label="refresh"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          /></svg
-      ></ic-button>
-      <ic-button variant="icon" size="large" aria-label="refresh" disabled
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          /></svg
-      ></ic-button>
-      <ic-button variant="icon" appearance="dark" size="large" title="refresh"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-          /></svg
-      ></ic-button>
-      <div
-        style="background-color:#2c2f34; display:inline-block; padding:6px 10px"
-      >
-        <ic-button
-          variant="icon"
-          appearance="light"
-          size="large"
-          title="refresh"
-          ><svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            /></svg
-        ></ic-button>
-        <ic-button
-          variant="icon"
-          appearance="light"
-          disabled
-          size="large"
-          title="refresh"
-          ><svg
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-            fill="#000000"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path
-              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-            /></svg
-        ></ic-button>
-      </div> `,
-
-  name: "Icon only",
-};
-
-export const IconVariants = {
-  render: () =>
-    html`<div style="display:flex; gap: 1rem; flex-direction:column;">
+      </div>
       <div>
-        <h1>Default</h1>
+        <ic-typography>Loading</ic-typography>
         <div style="display:flex; gap: 0.5rem">
           <ic-button
             variant="icon-primary"
+            theme="light"
             aria-label="refresh"
             id="testbutton"
+            loading
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1180,6 +595,7 @@ export const IconVariants = {
             variant="icon-secondary"
             aria-label="refresh"
             id="testbutton"
+            loading
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1198,6 +614,7 @@ export const IconVariants = {
             variant="icon-tertiary"
             aria-label="refresh"
             id="testbutton"
+            loading
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1216,6 +633,7 @@ export const IconVariants = {
             variant="icon-destructive"
             aria-label="refresh"
             id="testbutton"
+            loading
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1233,13 +651,13 @@ export const IconVariants = {
         </div>
       </div>
       <div>
-        <h1>Small</h1>
+        <ic-typography>Disabled</ic-typography>
         <div style="display:flex; gap: 0.5rem">
           <ic-button
             variant="icon-primary"
             aria-label="refresh"
             id="testbutton"
-            size="small"
+            disabled
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1258,7 +676,7 @@ export const IconVariants = {
             variant="icon-secondary"
             aria-label="refresh"
             id="testbutton"
-            size="small"
+            disabled
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1277,7 +695,7 @@ export const IconVariants = {
             variant="icon-tertiary"
             aria-label="refresh"
             id="testbutton"
-            size="small"
+            disabled
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1296,7 +714,7 @@ export const IconVariants = {
             variant="icon-destructive"
             aria-label="refresh"
             id="testbutton"
-            size="small"
+            disabled
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1314,13 +732,16 @@ export const IconVariants = {
         </div>
       </div>
       <div>
-        <h1>Large</h1>
-        <div style="display:flex; gap: 0.5rem">
+        <ic-typography>Light - monochrome</ic-typography>
+        <div
+          style="width: fit-content; background-color: #ececec; padding: 0.5rem;"
+        >
           <ic-button
             variant="icon-primary"
             aria-label="refresh"
             id="testbutton"
-            size="large"
+            theme="light"
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1339,7 +760,8 @@ export const IconVariants = {
             variant="icon-secondary"
             aria-label="refresh"
             id="testbutton"
-            size="large"
+            theme="light"
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1358,26 +780,8 @@ export const IconVariants = {
             variant="icon-tertiary"
             aria-label="refresh"
             id="testbutton"
-            size="large"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24px"
-              viewBox="0 0 24 24"
-              width="24px"
-              fill="#000000"
-            >
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path
-                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-              />
-            </svg>
-          </ic-button>
-          <ic-button
-            variant="icon-destructive"
-            aria-label="refresh"
-            id="testbutton"
-            size="large"
+            theme="light"
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1392,16 +796,13 @@ export const IconVariants = {
               />
             </svg>
           </ic-button>
-        </div>
-      </div>
-      <div>
-        <h1>Loading</h1>
-        <div style="display:flex; gap: 0.5rem">
           <ic-button
             variant="icon-primary"
             aria-label="refresh"
             id="testbutton"
+            theme="light"
             loading
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1420,7 +821,9 @@ export const IconVariants = {
             variant="icon-secondary"
             aria-label="refresh"
             id="testbutton"
+            theme="light"
             loading
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1439,107 +842,9 @@ export const IconVariants = {
             variant="icon-tertiary"
             aria-label="refresh"
             id="testbutton"
+            theme="light"
             loading
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24px"
-              viewBox="0 0 24 24"
-              width="24px"
-              fill="#000000"
-            >
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path
-                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-              />
-            </svg>
-          </ic-button>
-          <ic-button
-            variant="icon-destructive"
-            aria-label="refresh"
-            id="testbutton"
-            loading
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24px"
-              viewBox="0 0 24 24"
-              width="24px"
-              fill="#000000"
-            >
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path
-                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-              />
-            </svg>
-          </ic-button>
-        </div>
-      </div>
-      <div>
-        <h1>Disabled</h1>
-        <div style="display:flex; gap: 0.5rem">
-          <ic-button
-            variant="icon-primary"
-            aria-label="refresh"
-            id="testbutton"
-            disabled
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24px"
-              viewBox="0 0 24 24"
-              width="24px"
-              fill="#000000"
-            >
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path
-                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-              />
-            </svg>
-          </ic-button>
-          <ic-button
-            variant="icon-secondary"
-            aria-label="refresh"
-            id="testbutton"
-            disabled
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24px"
-              viewBox="0 0 24 24"
-              width="24px"
-              fill="#000000"
-            >
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path
-                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-              />
-            </svg>
-          </ic-button>
-          <ic-button
-            variant="icon-tertiary"
-            aria-label="refresh"
-            id="testbutton"
-            disabled
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24px"
-              viewBox="0 0 24 24"
-              width="24px"
-              fill="#000000"
-            >
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path
-                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-              />
-            </svg>
-          </ic-button>
-          <ic-button
-            variant="icon-destructive"
-            aria-label="refresh"
-            id="testbutton"
-            disabled
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1556,16 +861,16 @@ export const IconVariants = {
           </ic-button>
         </div>
       </div>
-      <div>
-        <h1>Light</h1>
-        <div
-          style="background-color:#2c2f34; padding:6px 10px; width:fit-content"
-        >
+      <ic-typography>Dark</ic-typography>
+      <div
+        style="background-color:#474A48; padding: 0.5rem; width: fit-content;"
+      >
+        <div>
           <ic-button
             variant="icon-primary"
             aria-label="refresh"
             id="testbutton"
-            appearance="light"
+            theme="dark"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1584,7 +889,7 @@ export const IconVariants = {
             variant="icon-secondary"
             aria-label="refresh"
             id="testbutton"
-            appearance="light"
+            theme="dark"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1603,7 +908,7 @@ export const IconVariants = {
             variant="icon-tertiary"
             aria-label="refresh"
             id="testbutton"
-            appearance="light"
+            theme="dark"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1622,7 +927,7 @@ export const IconVariants = {
             variant="icon-destructive"
             aria-label="refresh"
             id="testbutton"
-            appearance="light"
+            theme="dark"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1639,16 +944,16 @@ export const IconVariants = {
           </ic-button>
         </div>
       </div>
-      <div>
-        <h1>Light Loading</h1>
-        <div
-          style="background-color:#2c2f34; padding:6px 10px; width:fit-content"
-        >
+      <ic-typography>Dark Loading</ic-typography>
+      <div
+        style="background-color:#474A48; padding: 0.5rem; width: fit-content;"
+      >
+        <div>
           <ic-button
             variant="icon-primary"
             aria-label="refresh"
             id="testbutton"
-            appearance="light"
+            theme="dark"
             loading
           >
             <svg
@@ -1668,7 +973,7 @@ export const IconVariants = {
             variant="icon-secondary"
             aria-label="refresh"
             id="testbutton"
-            appearance="light"
+            theme="dark"
             loading
           >
             <svg
@@ -1688,7 +993,7 @@ export const IconVariants = {
             variant="icon-tertiary"
             aria-label="refresh"
             id="testbutton"
-            appearance="light"
+            theme="dark"
             loading
           >
             <svg
@@ -1708,7 +1013,7 @@ export const IconVariants = {
             variant="icon-destructive"
             aria-label="refresh"
             id="testbutton"
-            appearance="light"
+            theme="dark"
             loading
           >
             <svg
@@ -1726,14 +1031,17 @@ export const IconVariants = {
           </ic-button>
         </div>
       </div>
-      <div>
-        <h1>Dark</h1>
+      <ic-typography>Dark - monochrome</ic-typography>
+      <div
+        style="background-color:#474A48; padding: 0.5rem; width: fit-content;"
+      >
         <div>
           <ic-button
             variant="icon-primary"
             aria-label="refresh"
             id="testbutton"
-            appearance="dark"
+            theme="dark"
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1752,7 +1060,8 @@ export const IconVariants = {
             variant="icon-secondary"
             aria-label="refresh"
             id="testbutton"
-            appearance="dark"
+            theme="dark"
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1771,7 +1080,8 @@ export const IconVariants = {
             variant="icon-tertiary"
             aria-label="refresh"
             id="testbutton"
-            appearance="dark"
+            theme="dark"
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1787,10 +1097,12 @@ export const IconVariants = {
             </svg>
           </ic-button>
           <ic-button
-            variant="icon-destructive"
+            variant="icon-primary"
             aria-label="refresh"
             id="testbutton"
-            appearance="dark"
+            theme="dark"
+            loading
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1805,17 +1117,13 @@ export const IconVariants = {
               />
             </svg>
           </ic-button>
-        </div>
-      </div>
-      <div>
-        <h1>Dark Loading</h1>
-        <div>
           <ic-button
-            variant="icon-primary"
+            variant="icon-secondary"
             aria-label="refresh"
             id="testbutton"
-            appearance="dark"
+            theme="dark"
             loading
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1831,11 +1139,12 @@ export const IconVariants = {
             </svg>
           </ic-button>
           <ic-button
-            variant="icon-secondary"
+            variant="icon-tertiary"
             aria-label="refresh"
             id="testbutton"
-            appearance="dark"
+            theme="dark"
             loading
+            monochrome
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -1850,51 +1159,702 @@ export const IconVariants = {
               />
             </svg>
           </ic-button>
-          <ic-button
-            variant="icon-tertiary"
-            aria-label="refresh"
-            id="testbutton"
-            appearance="dark"
-            loading
+        </div>
+      </div>
+    </div>`,
+
+  name: "Icon variants",
+};
+
+export const WithIcon = {
+  render: () =>
+    html`<div style="padding: 1rem; display: flex; gap: 1rem">
+        <ic-button variant="primary">
+          Primary
+          <svg
+            slot="left-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button variant="secondary">
+          Secondary
+          <svg
+            slot="left-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button variant="tertiary">
+          Tertiary
+          <svg
+            slot="left-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button variant="destructive">
+          Destructive
+          <svg
+            slot="left-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+      </div>
+      <div style="padding: 1rem; display: flex; gap: 1rem">
+        <ic-button variant="primary">
+          Primary
+          <svg
+            slot="right-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button variant="secondary">
+          Secondary
+          <svg
+            slot="right-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button variant="tertiary">
+          Tertiary
+          <svg
+            slot="right-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button variant="destructive">
+          Destructive
+          <svg
+            slot="right-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+      </div> `,
+
+  name: "With icon",
+};
+
+export const Dropdown = {
+  render: () =>
+    html`<div>
+      <div style="padding: 6px">
+        <ic-button dropdown="true" variant="primary">Button</ic-button>
+        <ic-button dropdown="true" variant="primary"
+          >Button
+          <svg
+            slot="left-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button dropdown="true" variant="secondary">Button</ic-button>
+        <ic-button dropdown="true" variant="tertiary">Button</ic-button>
+      </div>
+      <div style="padding: 6px">
+        <ic-button dropdown="true" disabled="true" variant="primary"
+          >Button</ic-button
+        >
+        <ic-button dropdown="true" disabled="true" variant="primary"
+          >Button
+          <svg
+            slot="left-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button dropdown="true" disabled="true" variant="secondary"
+          >Button</ic-button
+        >
+        <ic-button dropdown="true" disabled="true" variant="tertiary"
+          >Button</ic-button
+        >
+      </div>
+      <div style="padding: 6px">
+        <ic-button dropdown="true" variant="primary" theme="dark"
+          >Button</ic-button
+        >
+        <ic-button dropdown="true" theme="dark" variant="primary"
+          >Button
+          <svg
+            slot="left-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button dropdown="true" variant="secondary" theme="dark"
+          >Button</ic-button
+        >
+        <ic-button dropdown="true" variant="tertiary" theme="dark"
+          >Button</ic-button
+        >
+      </div>
+      <div
+        style="background-color:#2c2f34; padding:6px 10px; width:fit-content;"
+      >
+        <ic-button dropdown="true" variant="primary" theme="light"
+          >Button</ic-button
+        >
+        <ic-button dropdown="true" theme="light" variant="primary"
+          >Button
+          <svg
+            slot="left-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button dropdown="true" variant="secondary" theme="light"
+          >Button</ic-button
+        >
+        <ic-button
+          dropdown="true"
+          variant="tertiary"
+          theme="light"
+          id="mybuttonid"
+          >Button</ic-button
+        >
+      </div>
+      <div style="padding: 6px">
+        <ic-button dropdown="true" variant="primary" size="small"
+          >Button</ic-button
+        >
+        <ic-button dropdown="true" size="small" variant="primary"
+          >Button
+          <svg
+            slot="left-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button dropdown="true" variant="secondary" size="small"
+          >Button</ic-button
+        >
+        <ic-button dropdown="true" variant="tertiary" size="small"
+          >Button</ic-button
+        >
+      </div>
+      <div style="padding: 6px">
+        <ic-button dropdown="true" variant="primary" size="large"
+          >Button</ic-button
+        >
+        <ic-button dropdown="true" size="large" variant="primary"
+          >Button
+          <svg
+            slot="left-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
           >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+            />
+          </svg>
+        </ic-button>
+        <ic-button dropdown="true" variant="secondary" size="large"
+          >Button</ic-button
+        >
+        <ic-button dropdown="true" variant="tertiary" size="large"
+          >Button</ic-button
+        >
+      </div>
+    </div>`,
+
+  name: "Dropdown",
+};
+
+export const DropdownExample = {
+  render: () =>
+    html`<script>
+        var icPopover = document.querySelector("#popover-menu");
+        var icButton = document.querySelector("#button-1");
+        function handleClick() {
+          icPopover.open = icButton.dropdownExpanded;
+        }
+        icPopover.addEventListener("icPopoverClosed", handleClose);
+        function handleClose() {
+          icButton.dropdownExpanded = icPopover.open;
+        }
+      </script>
+      <div>
+        <ic-button
+          dropdown="true"
+          variant="primary"
+          onclick="handleClick()"
+          id="button-1"
+          >Button</ic-button
+        >
+        <ic-popover-menu
+          anchor="button-1"
+          aria-label="popover"
+          id="popover-menu"
+        >
+          <ic-menu-item label="Copy code"></ic-menu-item>
+          <ic-menu-item label="Paste code"></ic-menu-item>
+          <ic-menu-item label="Actions"></ic-menu-item>
+        </ic-popover-menu>
+      </div>`,
+
+  name: "Dropdown example",
+};
+
+export const Size = {
+  render: () =>
+    html` <ic-button variant="primary" size="small">Small</ic-button>
+      <ic-button variant="primary">Default</ic-button>
+      <ic-button variant="primary" size="large">Large</ic-button>
+      <ic-button variant="primary" size="small"
+        >Small
+        <svg
+          slot="left-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-button>
+      <ic-button variant="primary"
+        >Default
+        <svg
+          slot="left-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-button>
+      <ic-button variant="primary" size="large"
+        >Large
+        <svg
+          slot="left-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-button>`,
+
+  name: "Size",
+};
+
+export const RouterLink = {
+  render: () =>
+    html`<div style="padding: 8px">
+        <ic-button size="small">
+          <a slot="router-item" href="/">Slotted link</a>
+        </ic-button>
+        <ic-button>
+          <a slot="router-item" href="/">Slotted link</a>
+        </ic-button>
+        <ic-button size="large">
+          <a slot="router-item" href="/">Slotted link</a>
+        </ic-button>
+      </div>
+      <div style="padding: 8px">
+        <ic-button disabled="true">
+          <a slot="router-item" href="/">Slotted link</a>
+        </ic-button>
+        <ic-button variant="secondary">
+          <a slot="router-item" href="/">Slotted link</a>
+        </ic-button>
+        <ic-button variant="tertiary">
+          <a slot="router-item" href="/">Slotted link</a>
+        </ic-button>
+        <ic-button variant="destructive">
+          <a slot="router-item" href="/">Slotted link</a>
+        </ic-button>
+        <ic-button variant="icon">
+          <a slot="router-item" href="/">
             <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height="24px"
+              width="24"
+              height="24"
               viewBox="0 0 24 24"
-              width="24px"
-              fill="#000000"
-            >
-              <path d="M0 0h24v24H0V0z" fill="none" />
-              <path
-                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
-              />
-            </svg>
-          </ic-button>
-          <ic-button
-            variant="icon-destructive"
-            aria-label="refresh"
-            id="testbutton"
-            appearance="dark"
-            loading
-          >
-            <svg
+              fill="none"
               xmlns="http://www.w3.org/2000/svg"
-              height="24px"
-              viewBox="0 0 24 24"
-              width="24px"
-              fill="#000000"
             >
-              <path d="M0 0h24v24H0V0z" fill="none" />
               <path
-                d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+                d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+                fill="currentColor"
               />
             </svg>
-          </ic-button>
-        </div>
+          </a>
+        </ic-button>
       </div>
-    </div>`,
+      <div style="padding: 8px">
+        <ic-button theme="light" monochrome="true">
+          <a slot="router-item" href="/">Slotted link</a>
+        </ic-button>
+        <ic-button theme="dark" monochrome="true">
+          <a slot="router-item" href="/">Slotted link</a>
+        </ic-button>
+      </div>`,
+
+  name: "Router link",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const IconWithoutViewBox = {
+  render: () =>
+    html`<ic-button variant="primary" size="small"
+        >Small
+        <svg
+          slot="left-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-button>
+      <ic-button variant="primary"
+        >Default
+        <svg
+          slot="left-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-button>
+      <ic-button variant="primary" size="large"
+        >Large
+        <svg
+          slot="left-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-button>`,
 
-  name: "Icon variants",
+  name: "Icon without viewBox",
+};
+
+export const FullWidth = {
+  render: () => html`
+    <ic-button variant="primary" full-width="true"
+      >Button
+      <svg
+        slot="left-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path
+          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+        />
+      </svg>
+    </ic-button>
+    <ic-button variant="secondary" full-width="true"
+      >Button
+      <svg
+        slot="left-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path
+          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+        />
+      </svg>
+    </ic-button>
+    <ic-button variant="tertiary" full-width="true"
+      >Button
+      <svg
+        slot="left-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path
+          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+        />
+      </svg>
+    </ic-button>
+    <ic-button theme="dark" full-width="true"
+      >Button
+      <svg
+        slot="left-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path
+          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+        />
+      </svg>
+    </ic-button>
+    <ic-button variant="destructive" full-width="true"
+      >Button
+      <svg
+        slot="left-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path
+          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+        />
+      </svg>
+    </ic-button>
+    <ic-button variant="destructive" disabled full-width="true"
+      >Button
+      <svg
+        slot="left-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" fill="none" />
+        <path
+          d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+        />
+      </svg>
+    </ic-button>
+    <div style="background-color:#2c2f34; padding:6px 10px,">
+      <ic-button variant="primary" theme="light" full-width="true">
+        Button
+        <svg
+          slot="left-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-button>
+      <ic-button variant="secondary" theme="light" full-width="true">
+        Button
+        <svg
+          slot="left-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-button>
+      <ic-button variant="tertiary" theme="light" full-width="true">
+        Button
+        <svg
+          slot="left-icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" fill="none" />
+          <path
+            d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"
+          />
+        </svg>
+      </ic-button>
+    </div>
+  `,
+
+  name: "Full width",
+};
+
+export const MinWidth = {
+  render: () => html`
+    <style>
+      ic-button {
+        --min-width: 4rem;
+      }
+    </style>
+    <ic-button>Min</ic-button>
+    <ic-button variant="secondary">Min</ic-button>
+  `,
+
+  name: "Min width",
+};
+
+export const Height = {
+  render: () => html`
+    <style>
+      ic-button[name="tall-button"] {
+        --height: 9rem;
+      }
+    </style>
+    <ic-button name="tall-button">Tall Button</ic-button>
+    <ic-button variant="secondary" name="tall-button">Tall Button</ic-button>
+  `,
+
+  name: "Height",
 };
 
 export const Tooltips = {
@@ -1960,7 +1920,9 @@ export const Playground = {
       full-width=${args.fullWidth}
       size=${args.size}
       loading=${args.loading}
-      appearance=${args.appearance}
+      theme=${args.theme}
+      monochrome=${args.monochrome}
+      dropdown=${args.dropdown}
       >${args.message}</ic-button
     >`,
 
@@ -1976,15 +1938,15 @@ export const Playground = {
     },
 
     size: {
-      options: ["default", "large", "small"],
+      options: ["medium", "large", "small"],
 
       control: {
         type: inlineRadioSelector,
       },
     },
 
-    appearance: {
-      options: ["default", "dark", "light"],
+    theme: {
+      options: ["inherit", "dark", "light"],
 
       control: {
         type: inlineRadioSelector,
@@ -1996,6 +1958,18 @@ export const Playground = {
         type: "boolean",
       },
     },
+
+    monochrome: {
+      control: {
+        type: "boolean",
+      },
+    },
+
+    dropdown: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
 
   name: "Playground",
@@ -2009,7 +1983,8 @@ export const PlaygroundWithIcon = {
       size=${args.size}
       full-width=${args.fullWidth}
       loading=${args.loading}
-      appearance=${args.appearance}
+      theme=${args.theme}
+      monochrome=${args.monochrome}
       >${args.message}
       <svg
         slot=${args.iconPlacement}
@@ -2039,14 +2014,14 @@ export const PlaygroundWithIcon = {
     },
 
     size: {
-      options: ["default", "large", "small"],
+      options: ["medium", "large", "small"],
 
       control: {
         type: inlineRadioSelector,
       },
     },
 
-    appearance: {
+    theme: {
       options: ["default", "dark", "light"],
 
       control: {
@@ -2067,6 +2042,12 @@ export const PlaygroundWithIcon = {
         type: inlineRadioSelector,
       },
     },
+
+    monochrome: {
+      control: {
+        type: "boolean",
+      },
+    },
   },
 
   name: "Playground with icon",
@@ -2074,49 +2055,58 @@ export const PlaygroundWithIcon = {
 
 export const Loading = {
   render: () => html`
-    <div style="padding: 6px">
-      <ic-button variant="primary" loading onclick="alert('test')"
-        >Button</ic-button
-      >
-    </div>
-    <div style="padding: 6px">
-      <ic-button
-        variant="primary"
-        loading
-        appearance="dark"
-        onclick="alert('test')"
-        >Button</ic-button
-      >
-    </div>
-    <div style="background-color:#2c2f34; padding:6px 10px; width:fit-content">
-      <ic-button variant="primary" loading appearance="light">Button</ic-button>
-    </div>
-    <div style="padding: 6px">
-      <ic-button variant="secondary" loading>Button</ic-button>
-    </div>
-    <div style="padding: 6px">
-      <ic-button variant="secondary" loading appearance="dark"
-        >Button</ic-button
+      <div style="padding: 6px">
+        <ic-button variant="primary" loading"
+          >Button</ic-button
+        >
+      </div>
+      <div style="padding: 6px">
+        <ic-button
+          variant="primary"
+          loading
+          theme="dark"
+          >Button</ic-button
+        >
+      </div>
+      <div
+        style="background-color:#2c2f34; padding:6px 10px; width:fit-content"
       >
-    </div>
-    <div style="background-color:#2c2f34; padding:6px 10px; width:fit-content">
-      <ic-button variant="secondary" loading appearance="light"
-        >Button</ic-button
+        <ic-button variant="primary" loading theme="light"
+          >Button</ic-button
+        >
+      </div>
+      <div style="padding: 6px">
+        <ic-button variant="secondary" loading>Button</ic-button>
+      </div>
+      <div style="padding: 6px">
+        <ic-button variant="secondary" loading theme="dark"
+          >Button</ic-button
+        >
+      </div>
+      <div
+        style="background-color:#2c2f34; padding:6px 10px; width:fit-content"
       >
-    </div>
-    <div style="padding: 6px">
-      <ic-button variant="tertiary" loading>Button</ic-button>
-    </div>
-    <div style="padding: 6px">
-      <ic-button variant="tertiary" loading appearance="dark">Button</ic-button>
-    </div>
-    <div style="background-color:#2c2f34; padding:6px 10px; width:fit-content">
-      <ic-button variant="tertiary" loading appearance="light"
-        >Button</ic-button
+        <ic-button variant="secondary" loading theme="light"
+          >Button</ic-button
+        >
+      </div>
+      <div style="padding: 6px">
+        <ic-button variant="tertiary" loading>Button</ic-button>
+      </div>
+      <div style="padding: 6px">
+        <ic-button variant="tertiary" loading theme="dark"
+          >Button</ic-button
+        >
+      </div>
+      <div
+        style="background-color:#2c2f34; padding:6px 10px; width:fit-content"
       >
-    </div>
-    <ic-button variant="destructive" loading>Button</ic-button>
-  `,
+        <ic-button variant="tertiary" loading theme="light"
+          >Button</ic-button
+        >
+      </div>
+      <ic-button variant="destructive" loading>Button</ic-button>
+    `,
 
   name: "Loading",
 };