diff --git a/apps/red-ui/src/app/components/base-screen/base-screen.component.html b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
index 8fe8111a9..d25b81ec6 100644
--- a/apps/red-ui/src/app/components/base-screen/base-screen.component.html
+++ b/apps/red-ui/src/app/components/base-screen/base-screen.component.html
@@ -66,13 +66,13 @@
         </div>
         <div class="menu right flex-2">
             <div class="buttons">
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="openSpotlightSearch()"
                     *ngIf="!isSearchScreen"
                     [icon]="'red:search'"
                     [tooltip]="'search.header-label' | translate"
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
 
                 <redaction-notifications *ngIf="userPreferenceService.areDevFeaturesEnabled"></redaction-notifications>
             </div>
diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
index 4ccc08dcc..55d72061f 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html
@@ -47,22 +47,20 @@
                     </div>
                     <div class="actions-container">
                         <div [class.active]="download.inProgress" class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="downloadItem(download)"
                                 *ngIf="download.status === 'READY' && !download.inProgress"
                                 [tooltip]="'downloads-list.actions.download' | translate"
                                 icon="red:download"
-                                type="dark-bg"
-                            >
-                            </redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
 
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="deleteItems([download])"
                                 [tooltip]="'downloads-list.actions.delete' | translate"
                                 icon="red:trash"
-                                type="dark-bg"
-                            >
-                            </redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
 
                             <mat-spinner *ngIf="download.inProgress" diameter="15"></mat-spinner>
                         </div>
@@ -75,11 +73,11 @@
 </section>
 
 <ng-template #bulkActions>
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="deleteItems()"
         *ngIf="screenStateService.areSomeEntitiesSelected$ | async"
         [tooltip]="'downloads-list.bulk.delete' | translate"
         icon="red:trash"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 </ng-template>
diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
index 2d998ecb0..6bf3c6a8d 100644
--- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
+++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.ts
@@ -9,6 +9,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { SortingService } from '@services/sorting.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-downloads-list-screen',
@@ -17,15 +18,16 @@ import { TableColConfig } from '@shared/components/table-col-name/table-col-name
     providers: [FilterService, SearchService, ScreenStateService, SortingService]
 })
 export class DownloadsListScreenComponent extends BaseListingComponent<DownloadStatusWrapper> implements OnInit {
-    itemSize = 80;
-    tableColConfigs: TableColConfig[] = [
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly itemSize = 80;
+    readonly tableColConfigs: TableColConfig[] = [
         { label: _('downloads-list.table-col-names.name') },
         { label: _('downloads-list.table-col-names.size') },
         { label: _('downloads-list.table-col-names.date') },
         { label: _('downloads-list.table-col-names.status') }
     ];
     protected readonly _primaryKey = 'storageId';
-    protected _tableHeaderLabel = _('downloads-list.table-header.title');
+    protected readonly _tableHeaderLabel = _('downloads-list.table-header.title');
 
     constructor(
         readonly fileDownloadService: FileDownloadService,
diff --git a/apps/red-ui/src/app/components/notifications/notifications.component.html b/apps/red-ui/src/app/components/notifications/notifications.component.html
index 736aa49b7..df9e2a4ce 100644
--- a/apps/red-ui/src/app/components/notifications/notifications.component.html
+++ b/apps/red-ui/src/app/components/notifications/notifications.component.html
@@ -1,4 +1,4 @@
-<redaction-circle-button [matMenuTriggerFor]="overlay" [showDot]="hasUnread" icon="red:notification"></redaction-circle-button>
+<iqser-circle-button [matMenuTriggerFor]="overlay" [showDot]="hasUnread" icon="red:notification"></iqser-circle-button>
 <mat-menu #overlay="matMenu" backdropClass="notifications-backdrop" class="notifications-menu" xPosition="before">
     <div *ngFor="let group of groupedNotifications | sortBy: 'desc':'dateString'">
         <div class="all-caps-label">{{ day(group) }}</div>
diff --git a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
index ce8f7bc99..7eeab5d8c 100644
--- a/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
+++ b/apps/red-ui/src/app/components/spotlight-search/spotlight-search.component.html
@@ -5,12 +5,7 @@
         <ng-container *ngIf="showActions$ | async as showActions">
             <mat-icon class="mr-34" *ngIf="!showActions" [svgIcon]="'red:search'"></mat-icon>
 
-            <redaction-circle-button
-                *ngIf="showActions"
-                class="mr-24"
-                (action)="dialogRef.close()"
-                icon="red:close"
-            ></redaction-circle-button>
+            <iqser-circle-button *ngIf="showActions" class="mr-24" (action)="dialogRef.close()" icon="red:close"></iqser-circle-button>
         </ng-container>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html
index 84c5a99a5..255cfba5a 100644
--- a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html
+++ b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.html
@@ -1,17 +1,17 @@
 <div class="action-buttons">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="openDeleteDossierTemplateDialog($event)"
         *ngIf="permissionsService.isAdmin()"
         [tooltip]="'dossier-templates-listing.action.delete' | translate"
         icon="red:trash"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="openEditDossierTemplateDialog($event)"
         *ngIf="permissionsService.isAdmin()"
         [tooltip]="'dossier-templates-listing.action.edit' | translate"
         icon="red:edit"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 </div>
diff --git a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.scss b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.scss
index eeb99fae7..3a02168bb 100644
--- a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.scss
+++ b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.scss
@@ -1,7 +1,7 @@
 .action-buttons {
     display: flex;
 
-    redaction-circle-button:not(:last-child) {
+    iqser-circle-button:not(:last-child) {
         margin-right: 2px;
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts
index 3020294f9..6d108c78f 100644
--- a/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts
+++ b/apps/red-ui/src/app/modules/admin/components/dossier-template-actions/dossier-template-actions.component.ts
@@ -5,6 +5,7 @@ import { Router } from '@angular/router';
 import { AdminDialogService } from '../../services/admin-dialog.service';
 import { DossierTemplateControllerService } from '@redaction/red-ui-http';
 import { LoadingService } from '@services/loading.service';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-dossier-template-actions',
@@ -12,6 +13,8 @@ import { LoadingService } from '@services/loading.service';
     styleUrls: ['./dossier-template-actions.component.scss']
 })
 export class DossierTemplateActionsComponent {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     @Input() dossierTemplateId: string;
     @Output() loadDossierTemplatesData = new EventEmitter<any>();
 
diff --git a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
index 88d0709fb..06a3f9e7c 100644
--- a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
+++ b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.html
@@ -1,21 +1,21 @@
 <div class="collapsed-wrapper">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [tooltip]="'user-stats.expand' | translate"
         icon="red:expand"
         tooltipPosition="before"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
     <div class="all-caps-label" translate="user-stats.title"></div>
 </div>
 
 <div class="header-wrapper mt-8">
     <div class="heading-xl flex-1" translate="user-stats.title"></div>
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [tooltip]="'user-stats.collapse' | translate"
         icon="red:collapse"
         tooltipPosition="before"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 </div>
 
 <div class="mt-44">
diff --git a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.scss b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.scss
index 8938e46bf..11153dd15 100644
--- a/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.scss
+++ b/apps/red-ui/src/app/modules/admin/components/users-stats/users-stats.component.scss
@@ -7,7 +7,7 @@
         max-width: 88%;
     }
 
-    redaction-circle-button {
+    iqser-circle-button {
         position: absolute;
         top: -8px;
         left: 270px;
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
index f0693271a..91b00e51d 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
@@ -96,5 +96,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
index 5a4f29102..5c2678992 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-attribute-dialog/add-edit-dossier-attribute-dialog.component.html
@@ -41,5 +41,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html
index e659f5a22..7b9674c1f 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.html
@@ -110,7 +110,7 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
 
 <ng-template #reportTemplateOptionTemplate let-option="option">
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
index d2dba3279..58077d3e8 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html
@@ -60,5 +60,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html
index 6cf1ed70c..fe02bd8db 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/add-edit-user-dialog.component.html
@@ -13,5 +13,5 @@
         [user]="user"
     ></redaction-reset-password>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html
index 730db8b41..d7bb85d6b 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/add-edit-user-dialog/user-details/user-details.component.html
@@ -50,7 +50,7 @@
             *ngIf="user"
             [label]="'add-edit-user.actions.delete' | translate"
             icon="red:trash"
-            [type]="iconButtonTypes.show_bg"
+            [type]="iconButtonTypes.dark"
         ></iqser-icon-button>
 
         <div class="all-caps-label cancel" mat-dialog-close translate="add-edit-user.actions.cancel"></div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
index 91c3cc26b..f690a3eb1 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html
@@ -41,5 +41,5 @@
             class="all-caps-label cancel"
         ></div>
     </div>
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html
index 47014fd58..2344dc113 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component.html
@@ -39,5 +39,5 @@
             class="all-caps-label cancel"
         ></div>
     </div>
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html
index bcfc453fd..57dea97ff 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/edit-color-dialog/edit-color-dialog.component.html
@@ -34,5 +34,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
index 472205a42..4420bd36b 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html
@@ -9,19 +9,19 @@
     </span>
 
     <ng-container *ngIf="screenStateService.areSomeEntitiesSelected$ | async">
-        <redaction-circle-button
+        <iqser-circle-button
             [matMenuTriggerFor]="readOnlyMenu"
             [tooltip]="'file-attributes-csv-import.table-header.actions.read-only' | translate"
             icon="red:read-only"
-            type="dark-bg"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.dark"
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="deactivateSelection()"
             [tooltip]="'file-attributes-csv-import.table-header.actions.remove-selected' | translate"
             icon="red:trash"
-            type="dark-bg"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.dark"
+        ></iqser-circle-button>
 
         <div class="separator"></div>
 
@@ -104,27 +104,27 @@
                     <input [(ngModel)]="field.temporaryName" name="name" />
                 </div>
             </form>
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="field.editingName = true"
                 *ngIf="!field.editingName"
                 [tooltip]="'file-attributes-csv-import.action.edit-name' | translate"
                 class="edit-name-button"
                 icon="red:edit"
-                type="dark-bg"
-            ></redaction-circle-button>
+                [type]="circleButtonTypes.dark"
+            ></iqser-circle-button>
             <ng-container *ngIf="field.editingName">
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="field.editingName = false; field.name = field.temporaryName"
                     [tooltip]="'file-attributes-csv-import.action.save-name' | translate"
                     icon="red:check"
-                    type="dark-bg"
-                ></redaction-circle-button>
-                <redaction-circle-button
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
+                <iqser-circle-button
                     (action)="field.editingName = false; field.temporaryName = field.name"
                     [tooltip]="'file-attributes-csv-import.action.cancel-edit-name' | translate"
                     icon="red:close"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
             </ng-container>
         </div>
         <div>
@@ -146,13 +146,13 @@
         </div>
         <div class="actions-container">
             <div class="action-buttons">
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="field.primaryAttribute = false; toggleFieldActive.emit(field)"
                     [removeTooltip]="true"
                     [tooltip]="'file-attributes-csv-import.action.remove' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
             </div>
         </div>
         <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
index 349ad4c2a..300d530d8 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.scss
@@ -19,7 +19,7 @@ redaction-table-col-name::ng-deep {
         margin-right: 10px;
     }
 
-    redaction-circle-button {
+    iqser-circle-button {
         margin-right: 2px;
     }
 
@@ -63,7 +63,7 @@ cdk-virtual-scroll-viewport {
                         display: none;
                     }
 
-                    redaction-circle-button:first-of-type {
+                    iqser-circle-button:first-of-type {
                         margin-left: 7px;
                         margin-right: 2px;
                     }
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
index 2e7c9cd95..ae2334ee7 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts
@@ -7,6 +7,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { SortingService } from '@services/sorting.service';
 import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { fileAttributeTypesTranslations } from '../../../translations/file-attribute-types-translations';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-active-fields-listing',
@@ -15,11 +16,13 @@ import { fileAttributeTypesTranslations } from '../../../translations/file-attri
     providers: [FilterService, SearchService, ScreenStateService, SortingService]
 })
 export class ActiveFieldsListingComponent extends BaseListingComponent<Field> implements OnChanges {
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly translations = fileAttributeTypesTranslations;
+
     @Input() entities: Field[];
     @Output() entitiesChange = new EventEmitter<Field[]>();
     @Output() setHoveredColumn = new EventEmitter<string>();
     @Output() toggleFieldActive = new EventEmitter<Field>();
-    translations = fileAttributeTypesTranslations;
 
     readonly typeOptions = [FileAttributeConfig.TypeEnum.TEXT, FileAttributeConfig.TypeEnum.NUMBER, FileAttributeConfig.TypeEnum.DATE];
     protected readonly _primaryKey = 'csvColumn';
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
index 1e140d174..5ff6e9262 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html
@@ -48,12 +48,12 @@
                             type="text"
                         />
                     </div>
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="readFile()"
                         *ngIf="changedParseConfig"
                         [tooltip]="'file-attributes-csv-import.parse-csv' | translate"
                         icon="red:check"
-                    ></redaction-circle-button>
+                    ></iqser-circle-button>
                 </form>
             </div>
         </div>
@@ -69,11 +69,11 @@
                         }}</span>
                     </div>
                     <div class="actions">
-                        <redaction-circle-button
+                        <iqser-circle-button
                             (click)="isSearchOpen = !isSearchOpen"
                             [attr.aria-expanded]="isSearchOpen"
                             icon="red:search"
-                        ></redaction-circle-button>
+                        ></iqser-circle-button>
                         <div class="quick-activation">
                             <span
                                 (click)="activateAll()"
@@ -127,10 +127,10 @@
             >
                 <div class="csv-part-header">
                     <div [translate]="'file-attributes-csv-import.csv-column'" class="all-caps-label"></div>
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (click)="previewExpanded = !previewExpanded"
                         [icon]="previewExpanded ? 'red:expand' : 'red:collapse'"
-                    ></redaction-circle-button>
+                    ></iqser-circle-button>
                 </div>
                 <div [class.hidden]="!previewExpanded" class="csv-part-content">
                     <div *ngIf="!hoveredColumn" class="no-column-data" translate="file-attributes-csv-import.no-hovered-column"></div>
@@ -162,5 +162,5 @@
         </div>
     </div>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index 95e0b39a0..dd2648c3a 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -37,7 +37,7 @@
             margin: 0 8px;
         }
 
-        redaction-circle-button {
+        iqser-circle-button {
             margin-left: 8px;
         }
     }
@@ -174,7 +174,7 @@
         background: $grey-2;
         border-right: 1px solid $separator;
 
-        &:not(.collapsed) redaction-circle-button {
+        &:not(.collapsed) iqser-circle-button {
             margin-right: -8px;
         }
 
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html b/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html
index 233615737..cc8b9ed6e 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html
+++ b/apps/red-ui/src/app/modules/admin/dialogs/smtp-auth-dialog/smtp-auth-dialog.component.html
@@ -27,5 +27,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
index 5a7783652..c72caa634 100644
--- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
@@ -8,14 +8,14 @@
             <div class="breadcrumb" translate="audit"></div>
 
             <div class="actions">
-                <redaction-circle-button
+                <iqser-circle-button
                     *ngIf="permissionsService.isUser()"
                     [tooltip]="'common.close' | translate"
                     class="ml-6"
                     icon="red:close"
                     redactionNavigateLastDossiersScreen
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </div>
         </div>
         <div class="red-content-inner">
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
index 42baf8f09..13f4e0f18 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html
@@ -5,12 +5,12 @@
         <div class="flex-1 actions">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -55,13 +55,13 @@
 
                     <div class="actions-container">
                         <div class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openEditColorDialog($event, color)"
                                 *ngIf="permissionsService.isAdmin()"
                                 [tooltip]="'default-colors-screen.action.edit' | translate"
                                 icon="red:edit"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
                         </div>
                     </div>
                     <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
index 5dae2be05..5b221c678 100644
--- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.ts
@@ -12,6 +12,7 @@ import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { DefaultColorType } from '@models/default-color-key.model';
 import { SortingService } from '@services/sorting.service';
 import { defaultColorsTranslations } from '../../translations/default-colors-translations';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './default-colors-screen.component.html',
@@ -26,7 +27,8 @@ export class DefaultColorsScreenComponent
     }>
     implements OnInit
 {
-    translations = defaultColorsTranslations;
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly translations = defaultColorsTranslations;
     protected readonly _primaryKey = 'key';
     private _colorsObj: Colors;
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
index b5532b31f..99ad87dec 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@@ -5,12 +5,12 @@
         <div class="flex-1 actions">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -31,13 +31,13 @@
                     {{ 'dictionary-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
                 </span>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="openDeleteDictionariesDialog($event)"
                     *ngIf="canBulkDelete$(permissionsService.isAdmin()) | async"
                     [tooltip]="'dictionary-listing.bulk.delete' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
 
                 <div class="attributes-actions-container">
                     <redaction-input-with-action
@@ -134,19 +134,19 @@
 
                     <div class="actions-container">
                         <div *ngIf="permissionsService.isAdmin()" class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openDeleteDictionariesDialog($event, [dict])"
                                 [tooltip]="'dictionary-listing.action.delete' | translate"
                                 icon="red:trash"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
 
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openAddEditDictionaryDialog($event, dict)"
                                 [tooltip]="'dictionary-listing.action.edit' | translate"
                                 icon="red:edit"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
                         </div>
                     </div>
                     <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
index 8847f47ca..dee236df5 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.ts
@@ -15,7 +15,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { SortingService } from '@services/sorting.service';
 import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { AdminDialogService } from '../../services/admin-dialog.service';
-import { IconButtonTypes } from '@iqser/common-ui';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({
     value: dict.entries?.length ?? 0,
@@ -31,6 +31,7 @@ const toChartConfig = (dict: TypeValueWrapper): DoughnutChartConfig => ({
 })
 export class DictionaryListingScreenComponent extends BaseListingComponent<TypeValueWrapper> implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
 
     chartData: DoughnutChartConfig[] = [];
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
index d5b568d83..808f064d6 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html
@@ -3,48 +3,48 @@
         <redaction-admin-breadcrumbs></redaction-admin-breadcrumbs>
 
         <div class="actions">
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="openDeleteDictionaryDialog($event)"
                 *ngIf="permissionsService.isAdmin()"
                 [tooltip]="'dictionary-overview.action.delete' | translate"
                 icon="red:trash"
                 tooltipPosition="below"
-                type="dark-bg"
-            ></redaction-circle-button>
+                [type]="circleButtonTypes.dark"
+            ></iqser-circle-button>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="openEditDictionaryDialog($event)"
                 *ngIf="permissionsService.isAdmin()"
                 [tooltip]="'dictionary-overview.action.edit' | translate"
                 icon="red:edit"
                 tooltipPosition="below"
-                type="dark-bg"
-            ></redaction-circle-button>
+                [type]="circleButtonTypes.dark"
+            ></iqser-circle-button>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="download()"
                 [tooltip]="'dictionary-overview.action.download' | translate"
                 icon="red:download"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="fileInput.click()"
                 *ngIf="permissionsService.isAdmin()"
                 [tooltip]="'dictionary-overview.action.upload' | translate"
                 icon="red:upload"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
 
             <input #fileInput (change)="upload($event)" accept="text/plain" class="file-upload-input" hidden type="file" />
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['..']"
                 [tooltip]="'common.close' | translate"
                 class="ml-6"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts
index 3d0d9cce9..7b1279a95 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.ts
@@ -11,13 +11,15 @@ import { DictionaryManagerComponent } from '@shared/components/dictionary-manage
 import { DictionarySaveService } from '@shared/services/dictionary-save.service';
 import { TypeValueWrapper } from '@models/file/type-value.wrapper';
 import { LoadingService } from '@services/loading.service';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
-    selector: 'redaction-dictionary-overview-screen',
     templateUrl: './dictionary-overview-screen.component.html',
     styleUrls: ['./dictionary-overview-screen.component.scss']
 })
 export class DictionaryOverviewScreenComponent extends ComponentHasChanges implements OnInit {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     entries: string[] = [];
 
     @ViewChild('dictionaryManager', { static: false })
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
index 07924c448..982a46c10 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html
@@ -5,12 +5,12 @@
         <div class="actions flex-1">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -34,13 +34,13 @@
                     }}
                 </span>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="openConfirmDeleteAttributeDialog($event)"
                     *ngIf="permissionsService.isAdmin() && screenStateService.areSomeEntitiesSelected$ | async"
                     [tooltip]="'dossier-attributes-listing.bulk.delete' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
 
                 <div class="attributes-actions-container">
                     <redaction-input-with-action
@@ -118,19 +118,19 @@
                     </div>
                     <div class="actions-container">
                         <div *ngIf="permissionsService.isAdmin()" class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openAddEditAttributeDialog($event, attribute)"
                                 [tooltip]="'dossier-attributes-listing.action.edit' | translate"
                                 icon="red:edit"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
 
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openConfirmDeleteAttributeDialog($event, attribute)"
                                 [tooltip]="'dossier-attributes-listing.action.delete' | translate"
                                 icon="red:trash"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
                         </div>
                     </div>
                     <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
index d474a027c..95478125f 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts
@@ -12,7 +12,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { PermissionsService } from '@services/permissions.service';
 import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
 import { dossierAttributeTypesTranslations } from '../../translations/dossier-attribute-types-translations';
-import { IconButtonTypes } from '@iqser/common-ui';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './dossier-attributes-listing-screen.component.html',
@@ -21,6 +21,7 @@ import { IconButtonTypes } from '@iqser/common-ui';
 })
 export class DossierAttributesListingScreenComponent extends BaseListingComponent<DossierAttributeConfig> implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
     readonly translations = dossierAttributeTypesTranslations;
     protected readonly _primaryKey = 'label';
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
index 0b861bfa0..e6f7b74fd 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
@@ -25,13 +25,13 @@
                         }}
                     </span>
 
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="openDeleteTemplatesDialog($event)"
                         *ngIf="canBulkDelete$(permissionsService.isAdmin()) | async"
                         [tooltip]="'dossier-templates-listing.bulk.delete' | translate"
                         icon="red:trash"
-                        type="dark-bg"
-                    ></redaction-circle-button>
+                        [type]="circleButtonTypes.dark"
+                    ></iqser-circle-button>
 
                     <div class="actions flex-1">
                         <redaction-input-with-action
diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
index af6855286..334b0753a 100644
--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts
@@ -11,7 +11,7 @@ import { SearchService } from '@shared/services/search.service';
 import { ScreenStateService } from '@shared/services/screen-state.service';
 import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { SortingService } from '@services/sorting.service';
-import { IconButtonTypes } from '@iqser/common-ui';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './dossier-templates-listing-screen.component.html',
@@ -21,6 +21,7 @@ import { IconButtonTypes } from '@iqser/common-ui';
 })
 export class DossierTemplatesListingScreenComponent extends BaseListingComponent<DossierTemplateModelWrapper> implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
     protected readonly _primaryKey = 'name';
 
     constructor(
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
index 98705018d..12ac3ee38 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@@ -5,12 +5,12 @@
         <div class="actions flex-1">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -33,13 +33,13 @@
                     }}
                 </span>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (click)="openConfirmDeleteAttributeDialog($event)"
                     *ngIf="canBulkDelete$(permissionsService.isAdmin()) | async"
                     [tooltip]="'file-attributes-listing.bulk-actions.delete' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
 
                 <div class="attributes-actions-container">
                     <redaction-input-with-action
@@ -49,14 +49,14 @@
                     ></redaction-input-with-action>
                     <input #fileInput (change)="importCSV($event.target['files'])" accept=".csv" class="csv-input" type="file" />
 
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="fileInput.click()"
                         *ngIf="permissionsService.isAdmin()"
                         [tooltip]="'file-attributes-listing.upload-csv' | translate"
                         icon="red:upload"
                         tooltipPosition="above"
-                        type="dark-bg"
-                    ></redaction-circle-button>
+                        [type]="circleButtonTypes.dark"
+                    ></iqser-circle-button>
 
                     <iqser-icon-button
                         (action)="openAddEditAttributeDialog($event)"
@@ -146,20 +146,18 @@
                     </div>
                     <div class="actions-container">
                         <div *ngIf="permissionsService.isAdmin()" class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="openAddEditAttributeDialog($event, attribute)"
                                 [tooltip]="'file-attributes-listing.action.edit' | translate"
                                 icon="red:edit"
-                                type="dark-bg"
-                            >
-                            </redaction-circle-button>
-                            <redaction-circle-button
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
+                            <iqser-circle-button
                                 (action)="openConfirmDeleteAttributeDialog($event, attribute)"
                                 [tooltip]="'file-attributes-listing.action.delete' | translate"
                                 icon="red:trash"
-                                type="dark-bg"
-                            >
-                            </redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
                         </div>
                     </div>
                     <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
index c99e66f0c..db387dac8 100644
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
@@ -11,7 +11,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { SortingService } from '@services/sorting.service';
 import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { fileAttributeTypesTranslations } from '../../translations/file-attribute-types-translations';
-import { IconButtonTypes } from '@iqser/common-ui';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './file-attributes-listing-screen.component.html',
@@ -21,6 +21,7 @@ import { IconButtonTypes } from '@iqser/common-ui';
 })
 export class FileAttributesListingScreenComponent extends BaseListingComponent<FileAttributeConfig> implements OnInit, OnDestroy {
     readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
     readonly translations = fileAttributeTypesTranslations;
     protected readonly _primaryKey = 'label';
     private _existingConfiguration: FileAttributesConfig;
diff --git a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html
index 623ada754..f09d283db 100644
--- a/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/general-config/general-config-screen.component.html
@@ -8,14 +8,14 @@
             <div class="breadcrumb" translate="configurations"></div>
 
             <div class="actions">
-                <redaction-circle-button
+                <iqser-circle-button
                     *ngIf="permissionsService.isUser()"
                     class="ml-6"
                     icon="red:close"
                     redactionNavigateLastDossiersScreen
                     tooltip="common.close"
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </div>
         </div>
 
@@ -168,7 +168,7 @@
                                 (action)="testConnection()"
                                 [disabled]="smtpForm.invalid"
                                 [label]="'general-config-screen.actions.test-connection' | translate"
-                                [type]="iconButtonTypes.show_bg"
+                                [type]="iconButtonTypes.dark"
                             ></iqser-icon-button>
                         </div>
                     </form>
diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html
index c80a5168a..80a3fe7c6 100644
--- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.html
@@ -5,12 +5,12 @@
         <div class="actions flex-1">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
@@ -44,12 +44,12 @@
         <div class="right-container" redactionHasScrollbar>
             <div class="header">
                 <div class="heading" translate="reports-screen.report-documents"></div>
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="fileInput.click()"
                     *ngIf="permissionsService.isAdmin()"
                     [tooltip]="'reports-screen.upload-document' | translate"
                     icon="red:upload"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </div>
 
             <div
@@ -63,19 +63,19 @@
                 <div class="name">{{ template.fileName }}</div>
 
                 <div class="actions">
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="download(template)"
                         [iconSize]="12"
                         [size]="18"
                         icon="red:download"
-                    ></redaction-circle-button>
-                    <redaction-circle-button
+                    ></iqser-circle-button>
+                    <iqser-circle-button
                         (action)="deleteTemplate(template)"
                         *ngIf="permissionsService.isAdmin()"
                         [iconSize]="12"
                         [size]="18"
                         icon="red:trash"
-                    ></redaction-circle-button>
+                    ></iqser-circle-button>
                 </div>
             </div>
         </div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
index bdfcc4d7d..45a989ca9 100644
--- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html
@@ -5,12 +5,12 @@
         <div class="flex-1 actions">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
index e7e29e70e..7641ba564 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.html
@@ -16,21 +16,21 @@
                     {{ 'trash.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
                 </span>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="bulkRestore()"
                     *ngIf="screenStateService.areSomeEntitiesSelected$ | async"
                     [tooltip]="'trash.bulk.restore' | translate"
                     icon="red:put-back"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="bulkDelete()"
                     *ngIf="screenStateService.areSomeEntitiesSelected$ | async"
                     [tooltip]="'trash.bulk.delete' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
             </div>
 
             <div [class.no-data]="screenStateService.noData$ | async" class="table-header" redactionSyncWidth="table-item">
@@ -105,20 +105,20 @@
                             {{ getRestoreDate(entity.softDeletedTime) | date: 'timeFromNow' }}
                         </div>
                         <div class="action-buttons">
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 *ngIf="canRestore(entity.softDeletedTime)"
                                 (action)="bulkRestore([entity.dossierId])"
                                 [tooltip]="'trash.action.restore' | translate"
                                 icon="red:put-back"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
 
-                            <redaction-circle-button
+                            <iqser-circle-button
                                 (action)="bulkDelete([entity.dossierId])"
                                 [tooltip]="'trash.action.delete' | translate"
                                 icon="red:trash"
-                                type="dark-bg"
-                            ></redaction-circle-button>
+                                [type]="circleButtonTypes.dark"
+                            ></iqser-circle-button>
                         </div>
                     </div>
 
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
index 24be37ea1..f2e81812c 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.scss
@@ -4,7 +4,7 @@
 .header-item {
     padding: 0 24px 0 10px;
 
-    redaction-circle-button:not(:last-child) {
+    iqser-circle-button:not(:last-child) {
         margin-right: 4px !important;
     }
 }
diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
index 1279007ac..50bec14c8 100644
--- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/c
 import { PermissionsService } from '@services/permissions.service';
 import { Dossier } from '@redaction/red-ui-http';
 import { LoadingService } from '@services/loading.service';
-import { AppConfigKey, AppConfigService } from '../../../app-config/app-config.service';
+import { AppConfigKey, AppConfigService } from '@app-config/app-config.service';
 import * as moment from 'moment';
 import { FilterService } from '@shared/services/filter.service';
 import { SearchService } from '@shared/services/search.service';
@@ -10,6 +10,7 @@ import { ScreenStateService } from '@shared/services/screen-state.service';
 import { SortingService } from '@services/sorting.service';
 import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { DossiersService } from '../../../dossier/services/dossiers.service';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 const HOURS_IN_A_DAY = 24;
 const MINUTES_IN_AN_HOUR = 60;
@@ -21,6 +22,7 @@ const MINUTES_IN_AN_HOUR = 60;
     providers: [FilterService, SearchService, ScreenStateService, SortingService, DossiersService]
 })
 export class TrashScreenComponent extends BaseListingComponent<Dossier> implements OnInit {
+    readonly circleButtonTypes = CircleButtonTypes;
     readonly itemSize = 80;
     protected readonly _primaryKey = 'dossierName';
     private readonly _deleteRetentionHours = this._appConfigService.getConfig(AppConfigKey.DELETE_RETENTION_HOURS);
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
index a764a247b..5b7b3d9da 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html
@@ -20,14 +20,14 @@
                     icon="red:plus"
                     [type]="iconButtonTypes.primary"
                 ></iqser-icon-button>
-                <redaction-circle-button
+                <iqser-circle-button
                     *ngIf="permissionsService.isUser()"
                     [tooltip]="'common.close' | translate"
                     class="ml-6"
                     icon="red:close"
                     redactionNavigateLastDossiersScreen
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </div>
         </div>
 
@@ -44,7 +44,7 @@
                         {{ 'user-listing.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) } }}
                     </span>
 
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="bulkDelete()"
                         *ngIf="screenStateService.areSomeEntitiesSelected$ | async"
                         [disabled]="(canDeleteSelected$ | async) === false"
@@ -55,8 +55,8 @@
                         "
                         icon="red:trash"
                         tooltipPosition="after"
-                        type="dark-bg"
-                    ></redaction-circle-button>
+                        [type]="circleButtonTypes.dark"
+                    ></iqser-circle-button>
                 </div>
 
                 <div class="table-header" redactionSyncWidth="table-item">
@@ -104,19 +104,19 @@
                         <div class="small-label">{{ getDisplayRoles(user) }}</div>
                         <div class="actions-container">
                             <div class="action-buttons">
-                                <redaction-circle-button
+                                <iqser-circle-button
                                     (action)="openAddEditUserDialog($event, user)"
                                     [tooltip]="'user-listing.action.edit' | translate"
                                     icon="red:edit"
-                                    type="dark-bg"
-                                ></redaction-circle-button>
-                                <redaction-circle-button
+                                    [type]="circleButtonTypes.dark"
+                                ></iqser-circle-button>
+                                <iqser-circle-button
                                     (action)="openDeleteUsersDialog([user], $event)"
                                     [disabled]="user.userId === userService.userId"
                                     [tooltip]="'user-listing.action.delete' | translate"
                                     icon="red:trash"
-                                    type="dark-bg"
-                                ></redaction-circle-button>
+                                    [type]="circleButtonTypes.dark"
+                                ></iqser-circle-button>
                             </div>
                         </div>
                         <div class="scrollbar-placeholder"></div>
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
index caddb8934..b07578d2b 100644
--- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts
@@ -16,7 +16,7 @@ import { BaseListingComponent } from '@shared/base/base-listing.component';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { rolesTranslations } from '../../../../translations/roles-translations';
-import { IconButtonTypes } from '@iqser/common-ui';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './user-listing-screen.component.html',
@@ -25,6 +25,7 @@ import { IconButtonTypes } from '@iqser/common-ui';
 })
 export class UserListingScreenComponent extends BaseListingComponent<User> implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
     readonly canDeleteSelected$ = this._canDeleteSelected$;
     collapsedDetails = false;
     chartData: DoughnutChartConfig[] = [];
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
index 5b251e724..4b3044479 100644
--- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
@@ -5,12 +5,12 @@
         <div class="actions flex-1">
             <redaction-dossier-template-actions></redaction-dossier-template-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 [routerLink]="['../..']"
                 [tooltip]="'common.close' | translate"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html
index 145bcc4bc..34385181d 100644
--- a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.html
@@ -1,118 +1,118 @@
 <div *ngIf="canPerformAnnotationActions" [class.always-visible]="alwaysVisible" class="annotation-actions">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.changeLegalBasis($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canChangeLegalBasis"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.edit-reason.label' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:edit"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.convertRecommendationToAnnotation($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canAcceptRecommendation"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.accept-recommendation.label' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:check"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.acceptSuggestion($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canAcceptSuggestion"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.accept-suggestion.label' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:check"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.undoDirectAction($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canUndo"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.undo' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:undo"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.rejectSuggestion($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canRejectSuggestion"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.reject-suggestion' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:trash"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.recategorizeImage($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canRecategorizeImage"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.recategorize-image' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:thumb-down"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.markAsFalsePositive($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canMarkTextOnlyAsFalsePositive && !annotationPermissions.canPerformMultipleRemoveActions"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.remove-annotation.false-positive' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:thumb-down"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="annotationActionsService.forceRedaction($event, annotations, annotationsChanged)"
         *ngIf="annotationPermissions.canForceRedaction"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.force-redaction.label' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:thumb-up"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="hideAnnotation($event)"
         *ngIf="isImage && isVisible"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.hide' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:visibility-off"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="showAnnotation($event)"
         *ngIf="isImage && !isVisible"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.show' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:visibility"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="suggestRemoveAnnotations($event, true)"
         *ngIf="annotationPermissions.canRemoveOrSuggestToRemoveFromDictionary"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.remove-annotation.remove-from-dict' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:remove-from-dict"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="markAsFalsePositive($event)"
         *ngIf="annotationPermissions.canMarkAsFalsePositive"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.remove-annotation.false-positive' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:thumb-down"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="suggestRemoveAnnotations($event, false)"
         *ngIf="annotationPermissions.canRemoveOrSuggestToRemoveOnlyHere"
         [tooltipPosition]="tooltipPosition"
         [tooltip]="'annotation-actions.remove-annotation.only-here' | translate"
-        [type]="btnType"
+        [type]="buttonType"
         icon="red:trash"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 </div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss
index a42d25021..82e86a785 100644
--- a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.scss
@@ -3,7 +3,7 @@
 .annotation-actions {
     display: none;
 
-    redaction-circle-button {
+    iqser-circle-button {
         display: block;
     }
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts
index 70425a94a..03ae851bc 100644
--- a/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/annotation-actions/annotation-actions.component.ts
@@ -6,13 +6,20 @@ import { AnnotationPermissions } from '@models/file/annotation.permissions';
 import { AnnotationActionsService } from '../../services/annotation-actions.service';
 import { WebViewerInstance } from '@pdftron/webviewer';
 
+export const AnnotationButtonTypes = {
+    dark: 'dark',
+    primary: 'primary'
+} as const;
+
+export type AnnotationButtonType = keyof typeof AnnotationButtonTypes;
+
 @Component({
     selector: 'redaction-annotation-actions',
     templateUrl: './annotation-actions.component.html',
     styleUrls: ['./annotation-actions.component.scss']
 })
 export class AnnotationActionsComponent implements OnInit {
-    @Input() btnType: 'dark-bg' | 'primary' = 'dark-bg';
+    @Input() buttonType: AnnotationButtonType = AnnotationButtonTypes.dark;
     @Input() tooltipPosition: 'before' | 'above' = 'before';
     @Input() canPerformAnnotationActions: boolean;
     @Input() viewer: WebViewerInstance;
diff --git a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.html
index 28809a440..cddedf78f 100644
--- a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.html
@@ -1,78 +1,78 @@
 <ng-container *ngIf="areSomeFilesSelected">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="delete()"
         *ngIf="canDelete"
         [tooltip]="'dossier-overview.bulk.delete' | translate"
         icon="red:trash"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="assign()"
         *ngIf="canAssign"
         [tooltip]="assignTooltip"
         icon="red:assign"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="assignToMe()"
         *ngIf="canAssignToSelf"
         [tooltip]="'dossier-overview.assign-me' | translate"
         icon="red:assign-me"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="setToUnderApproval()"
         *ngIf="canSetToUnderApproval"
         [tooltip]="'dossier-overview.under-approval' | translate"
         icon="red:ready-for-approval"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="setToUnderReview()"
         *ngIf="canSetToUnderReview"
         [tooltip]="'dossier-overview.under-review' | translate"
         icon="red:undo"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
     <redaction-file-download-btn [dossier]="dossier" [file]="selectedFiles"></redaction-file-download-btn>
 
     <!-- Approved-->
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="approveDocuments()"
         *ngIf="isReadyForApproval"
         [disabled]="!canApprove"
         [tooltip]="canApprove ? ('dossier-overview.approve' | translate) : ('dossier-overview.approve-disabled' | translate)"
         icon="red:approved"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
     <!-- Back to approval -->
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="setToUnderApproval()"
         *ngIf="canUndoApproval"
         [tooltip]="'dossier-overview.under-approval' | translate"
         icon="red:undo"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="ocr()"
         *ngIf="canOcr"
         [tooltip]="'dossier-overview.ocr-file' | translate"
         icon="red:ocr"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="reanalyse()"
         *ngIf="canReanalyse"
         [tooltip]="'dossier-overview.bulk.reanalyse' | translate"
         icon="red:refresh"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 </ng-container>
diff --git a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.ts
index 6c69164d7..257df818d 100644
--- a/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/bulk-actions/dossier-overview-bulk-actions.component.ts
@@ -11,6 +11,7 @@ import { ConfirmationDialogInput } from '@shared/dialogs/confirmation-dialog/con
 import { ScreenStateService } from '@shared/services/screen-state.service';
 import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-dossier-overview-bulk-actions',
@@ -18,6 +19,8 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
     styleUrls: ['./dossier-overview-bulk-actions.component.scss']
 })
 export class DossierOverviewBulkActionsComponent {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     @Output()
     reload = new EventEmitter();
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
index 2bbe4f149..b72105b3a 100644
--- a/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html
@@ -5,14 +5,14 @@
             <div>{{ comment.date | date: 'd MMM. yyyy, hh:mm a' }}</div>
         </div>
         <div class="comment-actions">
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="deleteComment(comment)"
                 *ngIf="permissionsService.canDeleteComment(comment)"
                 [iconSize]="10"
                 [size]="20"
                 class="pointer"
                 icon="red:trash"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
     <div>{{ comment.text }}</div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html
index bd02b1ad1..69e6a591c 100644
--- a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.html
@@ -1,17 +1,17 @@
 <div class="right-title heading" translate="file-preview.tabs.document-info.label">
     <div>
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="edit()"
             [tooltip]="'file-preview.tabs.document-info.edit' | translate"
             icon="red:edit"
             tooltipPosition="before"
-        ></redaction-circle-button>
-        <redaction-circle-button
+        ></iqser-circle-button>
+        <iqser-circle-button
             (action)="closeDocumentInfoView.emit()"
             [tooltip]="'file-preview.tabs.document-info.close' | translate"
             icon="red:close"
             tooltipPosition="before"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
     </div>
 </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss
index 87901023f..4cbdca5e8 100644
--- a/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/document-info/document-info.component.scss
@@ -28,7 +28,7 @@
 .right-title > div {
     display: flex;
 
-    > redaction-circle-button:not(:last-child) {
+    > iqser-circle-button:not(:last-child) {
         margin-right: 2px;
     }
 }
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html
index dbd094540..d808d7b0a 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.html
@@ -17,14 +17,14 @@
             <ng-container *ngIf="!editingOwner; else editOwner">
                 <redaction-initials-avatar [userId]="owner.userId" [withName]="true" color="gray" size="large"></redaction-initials-avatar>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="editingOwner = true"
                     *ngIf="permissionsService.isManager()"
                     [tooltip]="'dossier-details.edit-owner' | translate"
                     class="ml-14"
                     icon="red:edit"
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </ng-container>
         </div>
     </div>
@@ -81,10 +81,10 @@
 </ng-template>
 
 <ng-template #collapsible let-action="action" let-tooltip="tooltip">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="toggleCollapse.emit()"
         [icon]="'red:' + action"
         [tooltip]="tooltip"
         tooltipPosition="before"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss
index 42166a37b..55794a2a7 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.scss
@@ -9,7 +9,7 @@
         max-width: 88%;
     }
 
-    redaction-circle-button {
+    iqser-circle-button {
         position: absolute;
         top: -8px;
         left: 290px;
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html
index b78c711d0..95fd8149b 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.html
@@ -1,20 +1,20 @@
 <redaction-status-bar [config]="getDossierStatusConfig(dossier)"></redaction-status-bar>
 <div [class.active]="actionMenuOpen" class="action-buttons">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="openEditDossierDialog($event, dossier)"
         *ngIf="permissionsService.isManager()"
         [tooltip]="'dossier-listing.edit.action' | translate"
         icon="red:edit"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="reanalyseDossier($event, dossier)"
         *ngIf="permissionsService.displayReanalyseBtn(dossier)"
         [tooltip]="'dossier-listing.reanalyse.action' | translate"
         icon="red:refresh"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 
-    <redaction-file-download-btn [dossier]="dossier" [file]="dossier.files" type="dark-bg"></redaction-file-download-btn>
+    <redaction-file-download-btn [dossier]="dossier" [file]="dossier.files" [type]="circleButtonTypes.dark"></redaction-file-download-btn>
 </div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
index e8f6d2469..685937442 100644
--- a/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/dossier-listing-actions/dossier-listing-actions.component.ts
@@ -4,6 +4,7 @@ import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { StatusSorter } from '@utils/sorters/status-sorter';
 import { AppStateService } from '@state/app-state.service';
 import { DossiersDialogService } from '../../services/dossiers-dialog.service';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-dossier-listing-actions',
@@ -11,6 +12,8 @@ import { DossiersDialogService } from '../../services/dossiers-dialog.service';
     styleUrls: ['./dossier-listing-actions.component.scss']
 })
 export class DossierListingActionsComponent {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     @Input() dossier: DossierWrapper;
     @Output() actionPerformed = new EventEmitter<DossierWrapper | undefined>();
     actionMenuOpen = false;
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
index 428a81c2f..b57c5ad4b 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.html
@@ -10,32 +10,32 @@
 <ng-template #actions>
     <div class="file-actions" *ngIf="fileStatus">
         <!-- delete-->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="openDeleteFileDialog($event)"
             *ngIf="permissionsService.canDeleteFile(fileStatus)"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.delete.action' | translate"
             [type]="buttonType"
             icon="red:trash"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="assign($event)"
             *ngIf="canAssign && screen === 'dossier-overview'"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="assignTooltip"
             [type]="buttonType"
             icon="red:assign"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="assignToMe($event)"
             *ngIf="canAssignToSelf && screen === 'dossier-overview'"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.assign-me' | translate"
             [type]="buttonType"
             icon="red:assign-me"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- download redacted file-->
         <redaction-file-download-btn
@@ -46,16 +46,16 @@
             [type]="buttonType"
         ></redaction-file-download-btn>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="toggleViewDocumentInfo()"
             *ngIf="screen === 'file-preview'"
             [attr.aria-expanded]="activeDocumentInfo"
             [tooltip]="'file-preview.document-info' | translate"
             icon="red:status-info"
             tooltipPosition="below"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="toggleExcludePages()"
             *ngIf="screen === 'file-preview'"
             [attr.aria-expanded]="activeExcludePages"
@@ -63,30 +63,30 @@
             [tooltip]="'file-preview.exclude-pages' | translate"
             icon="red:exclude-pages"
             tooltipPosition="below"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- Ready for approval-->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="setFileUnderApproval($event)"
             *ngIf="canSetToUnderApproval"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.under-approval' | translate"
             [type]="buttonType"
             icon="red:ready-for-approval"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- Back to review -->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="setFileUnderReview($event, true)"
             *ngIf="canSetToUnderReview"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.under-review' | translate"
             [type]="buttonType"
             icon="red:undo"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- Approved-->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="setFileApproved($event)"
             *ngIf="permissionsService.isReadyForApproval(fileStatus)"
             [disabled]="!permissionsService.canApprove(fileStatus)"
@@ -98,47 +98,47 @@
             "
             [type]="buttonType"
             icon="red:approved"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- Back to approval -->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="setFileUnderApproval($event)"
             *ngIf="canUndoApproval"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.under-approval' | translate"
             [type]="buttonType"
             icon="red:undo"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="ocrFile($event)"
             *ngIf="canOcr"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.ocr-file' | translate"
             [type]="buttonType"
             icon="red:ocr"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!-- reanalyse file preview -->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="reanalyseFile($event)"
             *ngIf="canReanalyse && screen === 'file-preview'"
             [tooltip]="'file-preview.reanalyse-notification' | translate"
             icon="red:refresh"
             tooltipClass="warn small"
             tooltipPosition="below"
-            type="warn"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.warn"
+        ></iqser-circle-button>
 
         <!-- reanalyse file listing -->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="reanalyseFile($event)"
             *ngIf="canReanalyse && screen === 'dossier-overview'"
             [tooltipPosition]="tooltipPosition"
             [tooltip]="'dossier-overview.reanalyse.action' | translate"
             icon="red:refresh"
-            type="dark-bg"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.dark"
+        ></iqser-circle-button>
 
         <!-- exclude from redaction -->
         <div class="red-input-group">
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
index 134e5c222..6ffe91d1c 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/file-actions/file-actions.component.ts
@@ -9,6 +9,7 @@ import { LoadingService } from '@services/loading.service';
 import { FileManagementControllerService } from '@redaction/red-ui-http';
 import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-file-actions',
@@ -16,6 +17,8 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
     styleUrls: ['./file-actions.component.scss']
 })
 export class FileActionsComponent implements OnInit {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     @Input() fileStatus: FileStatusWrapper;
     @Input() activeDocumentInfo: boolean;
     @Input() activeExcludePages: boolean;
@@ -43,7 +46,7 @@ export class FileActionsComponent implements OnInit {
     }
 
     get buttonType() {
-        return this.screen === 'file-preview' ? 'default' : 'dark-bg';
+        return this.screen === 'file-preview' ? CircleButtonTypes.default : CircleButtonTypes.dark;
     }
 
     get toggleTooltip(): string {
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
index c0c16d70e..33acd987b 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.html
@@ -17,12 +17,12 @@
 </div>
 <div *ngIf="excludePages" class="right-title heading" translate="file-preview.tabs.exclude-pages.label">
     <div>
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="actionPerformed.emit('view-exclude-pages')"
             [tooltip]="'file-preview.tabs.exclude-pages.close' | translate"
             icon="red:close"
             tooltipPosition="before"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
     </div>
 </div>
 <div class="right-content">
@@ -51,11 +51,11 @@
                 [annotations]="selectedAnnotations"
                 [canPerformAnnotationActions]="!isReadOnly"
                 [viewer]="viewer"
-                btnType="primary"
+                buttonType="primary"
                 tooltipPosition="above"
             ></redaction-annotation-actions>
         </div>
-        <redaction-circle-button (action)="multiSelectActive = false" icon="red:close" type="primary"></redaction-circle-button>
+        <iqser-circle-button (action)="multiSelectActive = false" icon="red:close" [type]="circleButtonTypes.primary"></iqser-circle-button>
     </div>
     <div [class.lower-height]="multiSelectActive || isReadOnly" class="annotations-wrapper">
         <div
@@ -152,7 +152,7 @@
                                 [disabled]="activeViewerPage <= displayedPages[0]"
                                 [label]="'file-preview.tabs.annotations.jump-to-previous' | translate"
                                 icon="red:nav-prev"
-                                [type]="iconButtonTypes.show_bg"
+                                [type]="iconButtonTypes.dark"
                             ></iqser-icon-button>
                             <iqser-icon-button
                                 (action)="jumpToNextWithAnnotations()"
@@ -160,7 +160,7 @@
                                 [label]="'file-preview.tabs.annotations.jump-to-next' | translate"
                                 class="mt-8"
                                 icon="red:nav-next"
-                                [type]="iconButtonTypes.show_bg"
+                                [type]="iconButtonTypes.dark"
                             ></iqser-icon-button>
                         </div>
                     </ng-container>
@@ -244,10 +244,10 @@
 </ng-template>
 
 <ng-template #annotationFilterActionTemplate let-filter="filter">
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="toggleSkipped.emit($event)"
         *ngIf="filter.key === 'skipped'"
         [icon]="hideSkipped ? 'red:visibility-off' : 'red:visibility'"
-        type="dark-bg"
-    ></redaction-circle-button>
+        [type]="circleButtonTypes.dark"
+    ></iqser-circle-button>
 </ng-template>
diff --git a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
index 2c9e3c716..efba5b395 100644
--- a/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/file-workload/file-workload.component.ts
@@ -21,7 +21,7 @@ import { FilterModel } from '@shared/components/filters/popup-filter/model/filte
 import { CommentsComponent } from '../comments/comments.component';
 import { PermissionsService } from '@services/permissions.service';
 import { WebViewerInstance } from '@pdftron/webviewer';
-import { IconButtonTypes } from '@iqser/common-ui';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape'];
 const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
@@ -33,6 +33,7 @@ const ALL_HOTKEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
 })
 export class FileWorkloadComponent {
     readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
 
     displayedAnnotations: { [key: number]: { annotations: AnnotationWrapper[] } } = {};
     @Input() selectedAnnotations: AnnotationWrapper[];
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
index 8e3605d22..3d0bc5b17 100644
--- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html
@@ -21,12 +21,12 @@
             {{ range.startPage }}
         </ng-container>
         <ng-container *ngIf="range.startPage !== range.endPage"> {{ range.startPage }} -{{ range.endPage }} </ng-container>
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="includePagesRange(range)"
             *ngIf="permissionsService.canExcludePages()"
             [tooltip]="'file-preview.tabs.exclude-pages.put-back' | translate"
             icon="red:undo"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
     </div>
 </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss
index 3c6d8e585..3d8347c0d 100644
--- a/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.scss
@@ -29,14 +29,14 @@
             justify-content: space-between;
             height: 50px;
 
-            redaction-circle-button {
+            iqser-circle-button {
                 display: none;
             }
 
             &:hover {
                 background-color: $grey-8;
 
-                redaction-circle-button {
+                iqser-circle-button {
                     display: initial;
                 }
             }
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html
index 026b87721..377b3aed3 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.html
@@ -14,7 +14,7 @@
     <div *ngIf="overflowCount && !expandedTeam" [class.large-spacing]="largeSpacing" class="member pointer">
         <div (click)="toggleExpandedTeam()" class="oval large white-dark">+{{ overflowCount }}</div>
     </div>
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="openAssignDossierMembersDialog.emit()"
         *ngIf="permissionsService.isManager() && canAdd"
         [class.large-spacing]="largeSpacing"
@@ -22,8 +22,7 @@
         [tooltip]="'dossier-details.assign-members' | translate"
         class="member"
         icon="red:plus"
-        type="primary"
-    >
-    </redaction-circle-button>
+        [type]="circleButtonTypes.primary"
+    ></iqser-circle-button>
 </div>
 <div (click)="toggleExpandedTeam()" *ngIf="expandedTeam" class="all-caps-label see-less pointer" translate="dossier-details.see-less"></div>
diff --git a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.ts b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.ts
index fb56e836f..f0742ed28 100644
--- a/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/components/team-members/team-members.component.ts
@@ -1,5 +1,6 @@
 import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { PermissionsService } from '@services/permissions.service';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-team-members',
@@ -7,6 +8,8 @@ import { PermissionsService } from '@services/permissions.service';
     styleUrls: ['./team-members.component.scss']
 })
 export class TeamMembersComponent {
+    readonly circleButtonTypes = CircleButtonTypes;
+
     @Input() memberIds: string[];
     @Input() perLine: number;
     @Input() canAdd = true;
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
index 835ae7efa..316c1a4f5 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/add-dossier-dialog/add-dossier-dialog.component.html
@@ -87,12 +87,12 @@
                 [disabled]="disabled"
                 [label]="'add-dossier-dialog.actions.save-and-add-members' | translate"
                 icon="red:assign"
-                [type]="iconButtonTypes.show_bg"
+                [type]="iconButtonTypes.dark"
             ></iqser-icon-button>
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
 
 <ng-template #reportTemplateOptionTemplate let-option="option">
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
index 0f73f7b3a..1b1f9fab3 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/assign-reviewer-approver-dialog/assign-reviewer-approver-dialog.component.html
@@ -30,5 +30,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
index 150cfafb2..1bdee0e53 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/change-legal-basis-dialog/change-legal-basis-dialog.component.html
@@ -35,5 +35,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html
index 050300501..14770bf97 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/document-info-dialog/document-info-dialog.component.html
@@ -15,5 +15,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.html
index 445d8cd9e..d46f56def 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/dossier-dictionary-dialog/dossier-dictionary-dialog.component.html
@@ -20,5 +20,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
index 24c3abbd0..72fe36b08 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html
@@ -57,7 +57,7 @@
                     [label]="'edit-dossier-dialog.attributes.upload-image' | translate"
                     class="upload-button"
                     icon="red:upload"
-                    [type]="iconButtonTypes.show_bg"
+                    [type]="iconButtonTypes.dark"
                 ></iqser-icon-button>
 
                 <input
@@ -72,18 +72,18 @@
                 />
             </div>
             <div *ngIf="currentAttrValue(attr) && canEdit">
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="deleteAttr(attr)"
                     [tooltip]="'edit-dossier-dialog.attributes.delete-image' | translate"
                     icon="red:trash"
-                    type="dark-bg"
-                ></redaction-circle-button>
-                <redaction-circle-button
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
+                <iqser-circle-button
                     (action)="fileInputClick(attr)"
                     [tooltip]="'edit-dossier-dialog.attributes.upload-image' | translate"
                     icon="red:upload"
-                    type="dark-bg"
-                ></redaction-circle-button>
+                    [type]="circleButtonTypes.dark"
+                ></iqser-circle-button>
             </div>
         </div>
     </div>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
index 6355be9af..69c1c2210 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss
@@ -64,7 +64,7 @@
                 margin-right: 15px;
             }
 
-            redaction-circle-button:not(:last-child) {
+            iqser-circle-button:not(:last-child) {
                 margin-right: 2px;
             }
         }
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
index 733d885dd..e678d0a62 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts
@@ -8,7 +8,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import * as moment from 'moment';
 import { DossierAttributeWithValue } from '@models/dossier-attributes.model';
 import { DossierAttributesService } from '@shared/services/controller-wrappers/dossier-attributes.service';
-import { IconButtonTypes } from '@iqser/common-ui';
+import { CircleButtonTypes, IconButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-edit-dossier-attributes',
@@ -17,6 +17,7 @@ import { IconButtonTypes } from '@iqser/common-ui';
 })
 export class EditDossierAttributesComponent implements EditDossierSectionInterface, OnInit {
     readonly iconButtonTypes = IconButtonTypes;
+    readonly circleButtonTypes = CircleButtonTypes;
 
     @Input() dossierWrapper: DossierWrapper;
     @Output() updateDossier = new EventEmitter<any>();
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
index c1fa1a5e3..d42a79cf8 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/edit-dossier-dialog.component.html
@@ -75,5 +75,5 @@
         </div>
     </div>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
index cec1ded28..43c9e51d6 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/general-info/edit-dossier-general-info.component.html
@@ -61,7 +61,7 @@
             *ngIf="permissionsService.canDeleteDossier(dossierWrapper)"
             [label]="'dossier-listing.delete.action' | translate"
             icon="red:trash"
-            [type]="iconButtonTypes.show_bg"
+            [type]="iconButtonTypes.dark"
         ></iqser-icon-button>
     </div>
 </form>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
index 845be9a24..a441dc986 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/force-redaction-dialog/force-redaction-dialog.component.html
@@ -34,5 +34,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
index 2b2c7427e..292862fd9 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
@@ -70,5 +70,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
index e9284dab0..cf7ad05f8 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/recategorize-image-dialog/recategorize-image-dialog.component.html
@@ -30,5 +30,5 @@
         </div>
     </form>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
index aabddd419..a83b023dd 100644
--- a/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
+++ b/apps/red-ui/src/app/modules/dossier/dialogs/remove-annotations-dialog/remove-annotations-dialog.component.html
@@ -49,5 +49,5 @@
         </button>
     </div>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
index cee6e3f62..baf2573b4 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
@@ -11,7 +11,7 @@
             tooltipPosition="below"
         ></redaction-file-download-btn>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="reanalyseDossier()"
             *ngIf="permissionsService.displayReanalyseBtn()"
             [disabled]="screenStateService.areSomeEntitiesSelected$ | async"
@@ -19,17 +19,17 @@
             [tooltip]="'dossier-overview.new-rule.toast.actions.reanalyse-all' | translate"
             icon="red:refresh"
             tooltipPosition="below"
-            type="warn"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.warn"
+        ></iqser-circle-button>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="fileInput.click()"
             [tooltip]="'dossier-overview.header-actions.upload-document' | translate"
             class="ml-14"
             icon="red:upload"
             tooltipPosition="below"
-            type="primary"
-        ></redaction-circle-button>
+            [type]="circleButtonTypes.primary"
+        ></iqser-circle-button>
     </redaction-page-header>
 
     <div class="overlay-shadow"></div>
diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
index acdc86325..1ef8098ec 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts
@@ -35,6 +35,7 @@ import { UserPreferenceService } from '@services/user-preference.service';
 import { workloadTranslations } from '../../translations/workload-translations';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     templateUrl: './dossier-overview-screen.component.html',
@@ -45,14 +46,16 @@ export class DossierOverviewScreenComponent
     extends BaseListingComponent<FileStatusWrapper>
     implements OnInit, OnDestroy, OnDetach, OnAttach
 {
+    private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.activeDossier.dossierId;
+    protected readonly _primaryKey = 'filename';
+    readonly circleButtonTypes = CircleButtonTypes;
+
     readonly itemSize = 80;
     collapsedDetails = false;
     actionConfigs: ActionConfig[];
     dossierAttributes: DossierAttributeWithValue[] = [];
-    protected readonly _primaryKey = 'filename';
     @ViewChild(DossierDetailsComponent, { static: false })
     private readonly _dossierDetailsComponent: DossierDetailsComponent;
-    private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.activeDossier.dossierId;
     private _lastScrollPosition: number;
 
     @ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
index c982ab609..6bba36ab6 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.html
@@ -63,21 +63,21 @@
             ></redaction-assign-user-dropdown>
 
             <div *ngIf="canAssign" class="assign-actions-wrapper">
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="editingReviewer = true"
                     *ngIf="permissionsService.canAssignUser() && currentReviewer"
                     [tooltip]="assignTooltip"
                     icon="red:edit"
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
 
-                <redaction-circle-button
+                <iqser-circle-button
                     (action)="assignToMe()"
                     *ngIf="permissionsService.canAssignToSelf()"
                     [tooltip]="'file-preview.assign-me' | translate"
                     icon="red:assign-me"
                     tooltipPosition="below"
-                ></redaction-circle-button>
+                ></iqser-circle-button>
             </div>
 
             <ng-container *ngIf="permissionsService.isApprover() && !!lastReviewer">
@@ -93,27 +93,27 @@
                 [activeExcludePages]="excludePages"
             ></redaction-file-actions>
 
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="toggleFullScreen()"
                 [icon]="fullScreen ? 'red:exit-fullscreen' : 'red:fullscreen'"
                 [tooltip]="'file-preview.fullscreen' | translate"
                 class="ml-2"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
 
             <!-- Dev Mode Features-->
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="downloadOriginalFile()"
                 *ngIf="userPreferenceService.areDevFeaturesEnabled"
                 [tooltip]="'file-preview.download-original-file' | translate"
                 class="ml-8"
                 icon="red:download"
                 tooltipPosition="below"
-                type="primary"
-            ></redaction-circle-button>
+                [type]="circleButtonTypes.primary"
+            ></iqser-circle-button>
             <!-- End Dev Mode Features-->
 
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="closeFullScreen()"
                 *ngIf="!fullScreen"
                 [routerLink]="['/main/dossiers/' + appStateService.activeDossierId]"
@@ -121,7 +121,7 @@
                 class="ml-8"
                 icon="red:close"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </div>
     </div>
 
diff --git a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
index 4a88fae0c..a093bafac 100644
--- a/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
+++ b/apps/red-ui/src/app/modules/dossier/screens/file-preview-screen/file-preview-screen.component.ts
@@ -36,7 +36,7 @@ import { handleFilterDelta, processFilters } from '@shared/components/filters/po
 import { LoadingService } from '@services/loading.service';
 import { stampPDFPage } from '@utils/page-stamper';
 import { TranslateService } from '@ngx-translate/core';
-import { AutoUnsubscribeComponent } from '@iqser/common-ui';
+import { AutoUnsubscribeComponent, CircleButtonTypes } from '@iqser/common-ui';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
 
 const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
@@ -47,6 +47,9 @@ const ALL_HOTKEY_ARRAY = ['Escape', 'F', 'f'];
     styleUrls: ['./file-preview-screen.component.scss']
 })
 export class FilePreviewScreenComponent extends AutoUnsubscribeComponent implements OnInit, OnDestroy, OnAttach, OnDetach {
+    readonly circleButtonTypes = CircleButtonTypes;
+    readonly translations = fileStatusTranslations;
+
     dialogRef: MatDialogRef<any>;
     viewMode: ViewMode = 'STANDARD';
     fullScreen = false;
@@ -63,7 +66,6 @@ export class FilePreviewScreenComponent extends AutoUnsubscribeComponent impleme
     viewDocumentInfo = false;
     excludePages = false;
     @ViewChild(PdfViewerComponent) viewerComponent: PdfViewerComponent;
-    readonly translations = fileStatusTranslations;
     private _instance: WebViewerInstance;
     private _lastPage: string;
     private _reloadFileOnReanalysis = false;
diff --git a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
index ee83a886d..2ed035b3b 100644
--- a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.html
@@ -10,20 +10,20 @@
         </mat-select>
     </div>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="save.emit(value)"
         [tooltip]="'assign-user.save' | translate"
         class="pl-1"
         icon="red:check"
         tooltipPosition="below"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 
-    <redaction-circle-button
+    <iqser-circle-button
         (action)="value = oldUser; cancel.emit()"
         [tooltip]="'assign-user.cancel' | translate"
         icon="red:close"
         tooltipPosition="below"
-    ></redaction-circle-button>
+    ></iqser-circle-button>
 </div>
 
 <ng-template #avatar let-userId="userId">
diff --git a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss
index f03fcd2fb..a96757204 100644
--- a/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/assign-user-dropdown/assign-user-dropdown.component.scss
@@ -9,7 +9,7 @@
     height: 40px;
 }
 
-redaction-circle-button {
+iqser-circle-button {
     margin-left: 2px;
 
     &:first-of-type {
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html
deleted file mode 100644
index 84679d1c8..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<div [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip">
-    <button
-        (click)="performAction($event)"
-        [class.dark-bg]="type === 'dark-bg'"
-        [class.overlay]="showDot"
-        [class.primary]="type === 'primary'"
-        [class.warn]="type === 'warn'"
-        [disabled]="disabled"
-        [type]="isSubmit ? 'submit' : 'button'"
-        mat-icon-button
-    >
-        <mat-icon [svgIcon]="icon"></mat-icon>
-    </button>
-    <div *ngIf="showDot" class="dot"></div>
-</div>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.scss b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.scss
deleted file mode 100644
index 70735d33b..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@import '../../../../../../assets/styles/variables';
-
-:host {
-    height: var(--size);
-    width: var(--size);
-    align-items: center;
-
-    button {
-        height: var(--size);
-        width: var(--size);
-        line-height: var(--size);
-
-        mat-icon {
-            width: var(--iconSize);
-            height: var(--iconSize);
-            line-height: var(--iconSize);
-            margin: 0;
-
-            svg {
-                line-height: var(--iconSize);
-            }
-        }
-
-        &.mat-button-disabled {
-            cursor: not-allowed;
-        }
-
-        &.primary.mat-button-disabled {
-            background-color: $grey-6;
-            color: $white !important;
-        }
-
-        &.warn:not([disabled]) {
-            background-color: $yellow-2;
-
-            &:hover {
-                background-color: $yellow-2;
-            }
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts
deleted file mode 100644
index 83c816ccf..000000000
--- a/apps/red-ui/src/app/modules/shared/components/buttons/circle-button/circle-button.component.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
-import { MatTooltip } from '@angular/material/tooltip';
-
-@Component({
-    selector: 'redaction-circle-button',
-    templateUrl: './circle-button.component.html',
-    styleUrls: ['./circle-button.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class CircleButtonComponent implements OnInit {
-    @Input() icon: string;
-    @Input() tooltip: string;
-    @Input() showDot = false;
-    @Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above';
-    @Input() tooltipClass: string;
-    @Input() disabled = false;
-    @Input() type: 'default' | 'primary' | 'warn' | 'dark-bg' = 'default';
-    @Input() removeTooltip = false;
-    @Input() size = 34;
-    @Input() iconSize = 14;
-    @Input() isSubmit = false;
-    @Output() action = new EventEmitter<any>();
-
-    @ViewChild(MatTooltip) matTooltip: MatTooltip;
-
-    constructor(private _elRef: ElementRef) {}
-
-    ngOnInit(): void {
-        this._elRef.nativeElement.style.setProperty('--size', this.size + 'px');
-        this._elRef.nativeElement.style.setProperty('--iconSize', this.iconSize + 'px');
-    }
-
-    performAction($event: any) {
-        if (!this.disabled) {
-            if (this.removeTooltip) {
-                this.matTooltip.hide();
-                // Timeout to allow tooltip to disappear first,
-                // useful when removing an item from the list without a confirmation dialog
-                setTimeout(() => {
-                    this.action.emit($event);
-                }, 0);
-            } else {
-                this.action.emit($event);
-            }
-        }
-    }
-}
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html
index 70bb58548..ebf1b9659 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.html
@@ -1,4 +1,4 @@
-<redaction-circle-button
+<iqser-circle-button
     (action)="downloadFiles($event)"
     [disabled]="disabled || !canDownloadFiles"
     [tooltipClass]="tooltipClass"
@@ -6,4 +6,4 @@
     [tooltip]="tooltip"
     [type]="type"
     icon="red:download"
-></redaction-circle-button>
+></iqser-circle-button>
diff --git a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
index ddf9b3f4a..3bb732613 100644
--- a/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/buttons/file-download-btn/file-download-btn.component.ts
@@ -4,7 +4,7 @@ import { DossierWrapper } from '@state/model/dossier.wrapper';
 import { FileStatusWrapper } from '@models/file/file-status.wrapper';
 import { FileDownloadService } from '@upload-download/services/file-download.service';
 import { Toaster } from '@services/toaster.service';
-import { AutoUnsubscribeComponent } from '@iqser/common-ui';
+import { AutoUnsubscribeComponent, CircleButtonType, CircleButtonTypes } from '@iqser/common-ui';
 import { TranslateService } from '@ngx-translate/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
@@ -20,7 +20,7 @@ export class FileDownloadBtnComponent extends AutoUnsubscribeComponent implement
     @Input() dossier: DossierWrapper;
     @Input() file: FileStatusWrapper | FileStatusWrapper[];
     @Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above';
-    @Input() type: 'default' | 'primary' | 'warn' | 'dark-bg' = 'default';
+    @Input() type: CircleButtonType = CircleButtonTypes.default;
     @Input() tooltipClass: string;
     @Input() disabled = false;
 
diff --git a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
index a5cc57156..55f148d32 100644
--- a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html
@@ -13,22 +13,22 @@
         <!--        Search-->
         <mat-icon *ngIf="type === 'search' && !hasContent" class="icon-right" svgIcon="red:search"></mat-icon>
 
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="clearContent()"
             *ngIf="type === 'search' && hasContent"
             [disabled]="form.invalid"
             [size]="25"
             icon="red:close"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
 
         <!--        Submit-->
-        <redaction-circle-button
+        <iqser-circle-button
             (action)="executeAction($event)"
             *ngIf="type === 'action'"
             [disabled]="!hasContent"
             [icon]="icon"
             [isSubmit]="true"
             [size]="25"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
     </div>
 </form>
diff --git a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss
index d5207753c..f2c22fd06 100644
--- a/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss
+++ b/apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.scss
@@ -7,7 +7,7 @@ mat-icon.disabled {
     cursor: not-allowed;
 }
 
-redaction-circle-button {
+iqser-circle-button {
     position: absolute;
     top: 4px;
     right: 5px;
diff --git a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
index d48154477..5f2567f6b 100644
--- a/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/page-header/page-header.component.html
@@ -34,26 +34,26 @@
         </ng-container>
 
         <ng-container *ngFor="let config of actionConfigs; trackBy: trackByLabel">
-            <redaction-circle-button
+            <iqser-circle-button
                 (action)="config.action($event)"
                 *ngIf="!config.hide"
                 [icon]="config.icon"
                 [tooltip]="config.label"
                 tooltipPosition="below"
-            ></redaction-circle-button>
+            ></iqser-circle-button>
         </ng-container>
 
         <!-- Extra custom actions here -->
         <ng-content></ng-content>
 
-        <redaction-circle-button
+        <iqser-circle-button
             *ngIf="showCloseButton"
             [class.ml-6]="actionConfigs"
             [tooltip]="'common.close' | translate"
             icon="red:close"
             redactionNavigateLastDossiersScreen
             tooltipPosition="below"
-        ></redaction-circle-button>
+        ></iqser-circle-button>
     </div>
 </div>
 
diff --git a/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html b/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html
index ecd8aed71..ec15cfdac 100644
--- a/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html
+++ b/apps/red-ui/src/app/modules/shared/dialogs/confirmation-dialog/confirmation-dialog.component.html
@@ -22,5 +22,5 @@
         </div>
     </div>
 
-    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
+    <iqser-circle-button class="dialog-close" icon="red:close" mat-dialog-close></iqser-circle-button>
 </section>
diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts
index b109dc130..b0ea64e18 100644
--- a/apps/red-ui/src/app/modules/shared/shared.module.ts
+++ b/apps/red-ui/src/app/modules/shared/shared.module.ts
@@ -6,7 +6,6 @@ import { InitialsAvatarComponent } from './components/initials-avatar/initials-a
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { TableColNameComponent } from './components/table-col-name/table-col-name.component';
 import { PaginationComponent } from './components/pagination/pagination.component';
-import { CircleButtonComponent } from './components/buttons/circle-button/circle-button.component';
 import { FileDownloadBtnComponent } from './components/buttons/file-download-btn/file-download-btn.component';
 import { UserButtonComponent } from './components/buttons/user-button/user-button.component';
 import { MatConfigModule } from '../mat-config/mat-config.module';
@@ -40,7 +39,7 @@ import { DatePipe } from '@shared/pipes/date.pipe';
 import { TableHeaderComponent } from './components/table-header/table-header.component';
 import { CommonUiModule } from '@iqser/common-ui';
 
-const buttons = [CircleButtonComponent, FileDownloadBtnComponent, UserButtonComponent];
+const buttons = [FileDownloadBtnComponent, UserButtonComponent];
 
 const components = [
     FullPageLoadingIndicatorComponent,
diff --git a/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html b/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html
index 8dad86831..414969d1b 100644
--- a/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html
+++ b/apps/red-ui/src/app/modules/upload-download/dialogs/overwrite-files-dialog/overwrite-files-dialog.component.html
@@ -19,7 +19,7 @@
         <iqser-icon-button
             (action)="selectOption('skip')"
             [label]="'overwrite-files-dialog.options.skip' | translate"
-            [type]="iconButtonTypes.show_bg"
+            [type]="iconButtonTypes.dark"
         ></iqser-icon-button>
         <div (click)="cancel()" class="all-caps-label cancel" translate="overwrite-files-dialog.options.cancel"></div>
     </div>
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
index 18ed6f268..a101afe0c 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.html
@@ -3,8 +3,8 @@
         <div class="title flex-1">
             {{ 'upload-status.dialog.title' | translate: { len: uploadService.files.length } }}
         </div>
-        <redaction-circle-button [icon]="'red:status-' + (collapsed ? 'expand' : 'collapse')"></redaction-circle-button>
-        <redaction-circle-button (action)="closeDialog()" icon="red:close"></redaction-circle-button>
+        <iqser-circle-button [icon]="'red:status-' + (collapsed ? 'expand' : 'collapse')"></iqser-circle-button>
+        <iqser-circle-button (action)="closeDialog()" icon="red:close"></iqser-circle-button>
     </div>
     <div [hidden]="collapsed" class="upload-download-list">
         <div *ngFor="let dossierId of uploadService.activeDossierKeys">
@@ -39,21 +39,21 @@
                 </div>
 
                 <div *ngIf="model.error || !model.completed" [class.error]="model.error" class="actions">
-                    <redaction-circle-button
+                    <iqser-circle-button
                         (action)="uploadItem(model)"
                         *ngIf="model.error && !model.sizeError"
                         [tooltip]="'upload-status.dialog.actions.re-upload' | translate"
                         icon="red:refresh"
                         tooltipPosition="before"
-                        type="dark-bg"
-                    ></redaction-circle-button>
-                    <redaction-circle-button
+                        [type]="circleButtonTypes.dark"
+                    ></iqser-circle-button>
+                    <iqser-circle-button
                         (action)="cancelItem(model)"
                         [tooltip]="'upload-status.dialog.actions.cancel' | translate"
                         icon="red:close"
                         tooltipPosition="before"
-                        type="dark-bg"
-                    ></redaction-circle-button>
+                        [type]="circleButtonTypes.dark"
+                    ></iqser-circle-button>
                 </div>
             </div>
         </div>
diff --git a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
index 39bbe4f8d..900b15930 100644
--- a/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
+++ b/apps/red-ui/src/app/modules/upload-download/upload-status-overlay/upload-status-overlay.component.ts
@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FileUploadModel } from '../model/file-upload.model';
 import { FileUploadService } from '../services/file-upload.service';
 import { OverlayRef } from '@angular/cdk/overlay';
+import { CircleButtonTypes } from '@iqser/common-ui';
 
 @Component({
     selector: 'redaction-upload-status-overlay',
@@ -9,8 +10,9 @@ import { OverlayRef } from '@angular/cdk/overlay';
     styleUrls: ['./upload-status-overlay.component.scss']
 })
 export class UploadStatusOverlayComponent implements OnInit {
-    collapsed = true;
+    readonly circleButtonTypes = CircleButtonTypes;
 
+    collapsed = true;
     uploadStatusInterval: number;
 
     constructor(
diff --git a/apps/red-ui/src/assets/styles/_variables.scss b/apps/red-ui/src/assets/styles/_variables.scss
index af515352e..fe3412d18 100644
--- a/apps/red-ui/src/assets/styles/_variables.scss
+++ b/apps/red-ui/src/assets/styles/_variables.scss
@@ -29,9 +29,11 @@ $pink-1: #f125de;
 $primary: $red-1;
 $primary-2: $red-2;
 $accent: $grey-1;
+$warn: $yellow-2;
 $light: $white;
 $dark: $black;
 
-$dark-bg-hover: $grey-4;
+$btn-bg-hover: $grey-4;
+$btn-bg: $grey-6;
 
 $separator: rgba(226, 228, 233, 0.9);
diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss
index 1aa5820a1..e2badc255 100644
--- a/apps/red-ui/src/assets/styles/red-tables.scss
+++ b/apps/red-ui/src/assets/styles/red-tables.scss
@@ -92,7 +92,7 @@ cdk-virtual-scroll-viewport {
                     width: 14px;
                 }
 
-                redaction-circle-button:not(:last-child) {
+                iqser-circle-button:not(:last-child) {
                     margin-right: 2px;
                 }
 
diff --git a/libs/common-ui b/libs/common-ui
index e8de4ccdf..1b81fa715 160000
--- a/libs/common-ui
+++ b/libs/common-ui
@@ -1 +1 @@
-Subproject commit e8de4ccdf9a4d97e8fd6a6a08eb3be06b7e2c11e
+Subproject commit 1b81fa7153792f40d9810707884f889c449972d5