Text button type

src/assets/styles/common-buttons.scss

@@ -2,14 +2,17 @@
 .mat-flat-button {
     border-radius: var(--iqser-button-radius) !important;
     font-size: var(--iqser-button-font-size) !important;
-    height: var(--iqser-button-height);
     display: flex !important;
     align-items: center;
 
+    &:not(.text) {
+        height: var(--iqser-button-height);
+    }
+
     .mat-button-wrapper {
         display: flex;
         align-items: center;
-        line-height: 34px;
+        line-height: var(--iqser-font-size);
         transition: opacity 0.2s;
         width: 100%;
 
@@ -68,10 +71,19 @@ iqser-circle-button {
             background: rgba(var(--iqser-primary-rgb), 0.1);
         }
 
-        &:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):not(.help):hover {
+        &:not(.overlay):not(.mat-button-disabled):not(.primary):not(.dark-bg):not(.warn):not(.help):not(.text):hover {
             background-color: var(--iqser-btn-bg);
         }
 
+        &.text {
+            color: var(--iqser-primary);
+            font-weight: 500 !important;
+
+            &:hover {
+                background-color: rgba(var(--iqser-primary-rgb), 0.05);
+            }
+        }
+
         &.primary {
             font-weight: 500 !important;
             background-color: var(--iqser-primary);

src/lib/buttons/types/icon-button.type.ts

@@ -3,6 +3,7 @@ export const IconButtonTypes = {
     dark: 'dark',
     primary: 'primary',
     help: 'help',
+    text: 'text',
 } as const;
 
 export type IconButtonType = keyof typeof IconButtonTypes;