diff --git a/src/index.css b/src/index.css
index 3bae0c3..64873a4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -50,8 +50,73 @@
 
   button {
     @apply border-0 flex flex-row items-center justify-center gap-1 px-2 py-1;
-    &.icon {
-      @apply bg-swatch-neutral-40 text-on-surface;
+    &:not(.outlined) {
+      &.primary {
+        @apply bg-primary hover:bg-primary-hover active:bg-primary-active text-on-primary disabled:bg-primary-disabled disabled:text-on-primary-disabled;
+      }
+      &.secondary {
+        @apply bg-secondary hover:bg-secondary-hover active:bg-secondary-active text-on-secondary disabled:bg-secondary-disabled disabled:text-on-secondary-disabled;
+      }
+      &.tertiary {
+        @apply bg-tertiary hover:bg-tertiary-hover active:bg-tertiary-active text-on-tertiary disabled:bg-tertiary-disabled disabled:text-on-tertiary-disabled;
+      }
+      &.accent {
+        @apply bg-accent hover:bg-accent-hover active:bg-accent-active text-on-accent disabled:bg-accent-disabled disabled:text-on-accent-disabled;
+      }
+      &.danger {
+        @apply bg-danger hover:bg-danger-hover active:bg-danger-active text-on-danger disabled:bg-danger-disabled disabled:text-on-danger-disabled;
+      }
+      &.success {
+        @apply bg-success hover:bg-success-hover active:bg-success-active text-on-success disabled:bg-success-disabled disabled:text-on-success-disabled;
+      }
+      &.warn {
+        @apply bg-warn hover:bg-warn-hover active:bg-warn-active text-on-warn disabled:bg-warn-disabled disabled:text-on-warn-disabled;
+      }
+      &.info {
+        @apply bg-info hover:bg-info-hover active:bg-info-active text-on-info disabled:bg-info-disabled disabled:text-on-info-disabled;
+      }
+      &.progressive {
+        @apply bg-progressive hover:bg-progressive-hover active:bg-progressive-active text-on-progressive disabled:bg-progressive-disabled disabled:text-on-progressive-disabled;
+      }
+      &.defensive {
+        @apply bg-defensive hover:bg-defensive-hover active:bg-defensive-active text-on-defensive disabled:bg-defensive-disabled disabled:text-on-defensive-disabled;
+      }
+      &.neutral {
+        @apply bg-neutral hover:bg-neutral-hover active:bg-neutral-active text-on-neutral disabled:bg-neutral-disabled disabled:text-on-neutral-disabled;
+      }
+    }
+    &.outlined {
+      @apply bg-transparent border;
+      &.primary {
+        @apply border-primary text-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active disabled:border-primary-disabled disabled:text-primary-disabled;
+      }
+      &.secondary {
+        @apply border-secondary text-secondary hover:border-secondary-hover hover:text-secondary-hover active:border-secondary-active active:text-secondary-active disabled:border-secondary-disabled disabled:text-secondary-disabled;
+      }
+      &.tertiary {
+        @apply border-tertiary text-tertiary hover:border-tertiary-hover hover:text-tertiary-hover active:border-tertiary-active active:text-tertiary-active disabled:border-tertiary-disabled disabled:text-tertiary-disabled;
+      }
+      &.accent {
+        @apply border-accent text-accent hover:border-accent-hover hover:text-accent-hover active:border-accent-active active:text-accent-active disabled:border-accent-disabled disabled:text-accent-disabled;
+      }
+      &.danger {
+        @apply border-danger text-danger hover:border-danger-hover hover:text-danger-hover active:border-danger-active active:text-danger-active disabled:border-danger-disabled disabled:text-danger-disabled;
+      }
+      &.success {
+        @apply border-success text-success hover:border-success-hover hover:text-success-hover active:border-success-active active:text-success-active disabled:border-success-disabled disabled:text-success-disabled;
+      }
+      &.warn {
+        @apply border-warn text-warn hover:border-warn-hover hover:text-warn-hover active:border-warn-active active:text-warn-active disabled:border-warn-disabled disabled:text-warn-disabled;
+      }
+      &.info {
+        @apply border-info text-info hover:border-info-hover hover:text-info-hover active:border-info-active active:text-info-active disabled:border-info-disabled disabled:text-info-disabled;
+      }
+      &.progressive {
+        @apply border-progressive text-progressive hover:border-progressive-hover hover:text-progressive-hover active:border-progressive-active active:text-progressive-active disabled:border-progressive-disabled disabled:text-progressive-disabled;
+      }
+      &.defensive {
+        @apply border-defensive text-defensive hover:border-defensive-hover hover:text-defensive-hover active:border-defensive-active active:text-defensive-active disabled:border-defensive-disabled disabled:text-defensive-disabled;
+      }
     }
   }
 }