diff --git a/src/lib/buttons/chevron-button/chevron-button.component.html b/src/lib/buttons/chevron-button/chevron-button.component.html
index 84abab7..6993a73 100644
--- a/src/lib/buttons/chevron-button/chevron-button.component.html
+++ b/src/lib/buttons/chevron-button/chevron-button.component.html
@@ -1,6 +1,8 @@
-<button [class.overlay]="showDot" [class.primary]="primary" [disabled]="disabled" [id]="buttonId" mat-button>
-    <span>{{ label }}</span>
+<button [class.overlay]="showDot()" [class.primary]="primary()" [disabled]="disabled()" [id]="buttonId()" mat-button>
+    <span>{{ label() }}</span>
     <mat-icon class="chevron-icon" iconPositionEnd svgIcon="iqser:arrow-down"></mat-icon>
 </button>
 
-<div *ngIf="showDot" class="dot"></div>
+@if (showDot()) {
+    <div class="dot"></div>
+}
diff --git a/src/lib/buttons/chevron-button/chevron-button.component.ts b/src/lib/buttons/chevron-button/chevron-button.component.ts
index 1014673..e795c39 100644
--- a/src/lib/buttons/chevron-button/chevron-button.component.ts
+++ b/src/lib/buttons/chevron-button/chevron-button.component.ts
@@ -1,8 +1,7 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { randomString } from '../../utils';
-import { NgIf } from '@angular/common';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { randomString } from '../../utils';
 
 @Component({
     selector: 'iqser-chevron-button',
@@ -10,12 +9,12 @@ import { MatIconModule } from '@angular/material/icon';
     styleUrls: ['./chevron-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [NgIf, MatIconModule, MatButtonModule],
+    imports: [MatIconModule, MatButtonModule],
 })
 export class ChevronButtonComponent {
-    @Input({ required: true }) label!: string;
-    @Input() showDot = false;
-    @Input() primary = false;
-    @Input() disabled = false;
-    @Input() buttonId = `${randomString()}-chevron-button`;
+    readonly label = input.required<string>();
+    readonly showDot = input(false, { transform: booleanAttribute });
+    readonly primary = input(false, { transform: booleanAttribute });
+    readonly disabled = input(false, { transform: booleanAttribute });
+    readonly buttonId = input(`${randomString()}-chevron-button`);
 }
diff --git a/src/lib/buttons/circle-button/circle-button.component.html b/src/lib/buttons/circle-button/circle-button.component.html
index ba7e816..61b3d2a 100644
--- a/src/lib/buttons/circle-button/circle-button.component.html
+++ b/src/lib/buttons/circle-button/circle-button.component.html
@@ -1,21 +1,25 @@
-<div [matTooltipClass]="tooltipClass || ''" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip || ''">
+<div [matTooltipClass]="tooltipClass()" [matTooltipPosition]="tooltipPosition()" [matTooltip]="tooltip()">
     <button
         (click)="performAction($event)"
-        [class.dark-bg]="type === _circleButtonTypes.dark"
-        [class.grey-selected]="greySelected"
-        [class.overlay]="showDot"
-        [class.primary]="type === _circleButtonTypes.primary"
-        [class.warn]="type === _circleButtonTypes.warn"
-        [disabled]="disabled"
-        [id]="buttonId"
+        [class.dark-bg]="type() === _circleButtonTypes.dark"
+        [class.grey-selected]="greySelected()"
+        [class.overlay]="showDot()"
+        [class.primary]="type() === _circleButtonTypes.primary"
+        [class.warn]="type() === _circleButtonTypes.warn"
+        [disabled]="disabled()"
+        [id]="buttonId()"
         [iqserStopPropagation]="action.observed && !_hasRouterLink"
-        [type]="isSubmit ? 'submit' : 'button'"
+        [type]="isSubmit() ? 'submit' : 'button'"
         mat-icon-button
     >
-        <mat-icon [svgIcon]="icon"></mat-icon>
+        <mat-icon [svgIcon]="icon()"></mat-icon>
     </button>
 
-    <div *ngIf="showDot" class="dot"></div>
+    @if (showDot()) {
+        <div class="dot"></div>
+    }
 
-    <div *ngIf="dropdownButton" [class.disabled]="disabled" class="arrow-down"></div>
+    @if (dropdownButton()) {
+        <div [class.disabled]="disabled()" class="arrow-down"></div>
+    }
 </div>
diff --git a/src/lib/buttons/circle-button/circle-button.component.ts b/src/lib/buttons/circle-button/circle-button.component.ts
index 3e8e6ca..c727b04 100644
--- a/src/lib/buttons/circle-button/circle-button.component.ts
+++ b/src/lib/buttons/circle-button/circle-button.component.ts
@@ -1,5 +1,16 @@
-import { NgIf } from '@angular/common';
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
+import {
+    booleanAttribute,
+    ChangeDetectionStrategy,
+    Component,
+    effect,
+    ElementRef,
+    EventEmitter,
+    inject,
+    input,
+    numberAttribute,
+    Output,
+    viewChild,
+} from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
@@ -14,37 +25,39 @@ import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type
     styleUrls: ['./circle-button.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [MatTooltipModule, MatIconModule, NgIf, MatButtonModule, StopPropagationDirective],
+    imports: [MatTooltipModule, MatIconModule, MatButtonModule, StopPropagationDirective],
 })
-export class CircleButtonComponent implements OnInit {
+export class CircleButtonComponent {
     readonly #elementRef = inject(ElementRef<HTMLElement>);
-    @ViewChild(MatTooltip) private readonly _matTooltip!: MatTooltip;
+    protected readonly _matTooltip = viewChild.required(MatTooltip);
     protected readonly _circleButtonTypes = CircleButtonTypes;
     protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
-    @Input() buttonId = `${randomString()}-circle-button`;
-    @Input({ required: true }) icon!: string;
-    @Input() tooltip?: string;
-    @Input() tooltipClass?: string;
-    @Input() showDot = false;
-    @Input() tooltipPosition: IqserTooltipPosition = IqserTooltipPositions.above;
-    @Input() disabled = false;
-    @Input() type: CircleButtonType = CircleButtonTypes.default;
-    @Input() greySelected = false;
-    @Input() removeTooltip = false;
-    @Input() isSubmit = false;
-    @Input() dropdownButton = false;
-    @Input() size = 34;
-    @Input() iconSize = 14;
+    readonly buttonId = input(`${randomString()}-circle-button`);
+    readonly icon = input.required<string>();
+    readonly tooltip = input('');
+    readonly tooltipClass = input('');
+    readonly showDot = input(false, { transform: booleanAttribute });
+    readonly tooltipPosition = input<IqserTooltipPosition>(IqserTooltipPositions.above);
+    readonly disabled = input(false, { transform: booleanAttribute });
+    readonly type = input<CircleButtonType>(CircleButtonTypes.default);
+    readonly greySelected = input(false, { transform: booleanAttribute });
+    readonly removeTooltip = input(false, { transform: booleanAttribute });
+    readonly isSubmit = input(false, { transform: booleanAttribute });
+    readonly dropdownButton = input(false, { transform: booleanAttribute });
+    readonly size = input(34, { transform: numberAttribute });
+    readonly iconSize = input(14, { transform: numberAttribute });
     @Output() readonly action = new EventEmitter<MouseEvent>();
 
-    ngOnInit() {
-        this.#elementRef.nativeElement.style.setProperty('--circle-button-size', `${this.size}px`);
-        this.#elementRef.nativeElement.style.setProperty('--circle-button-icon-size', `${this.iconSize}px`);
+    constructor() {
+        effect(() => {
+            this.#elementRef.nativeElement.style.setProperty('--circle-button-size', `${this.size()}px`);
+            this.#elementRef.nativeElement.style.setProperty('--circle-button-icon-size', `${this.iconSize()}px`);
+        });
     }
 
     performAction($event: MouseEvent) {
-        if (this.removeTooltip) {
-            this._matTooltip.hide();
+        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));
diff --git a/src/lib/buttons/icon-button/icon-button.component.html b/src/lib/buttons/icon-button/icon-button.component.html
index d9d4967..703af59 100644
--- a/src/lib/buttons/icon-button/icon-button.component.html
+++ b/src/lib/buttons/icon-button/icon-button.component.html
@@ -1,14 +1,19 @@
 <button
-    (click)="!disabled && action.emit($event)"
-    [disabled]="disabled"
-    [id]="buttonId"
+    (click)="!disabled() && action.emit($event)"
+    [disabled]="disabled()"
+    [id]="buttonId()"
     [iqserStopPropagation]="action.observed && !_hasRouterLink"
-    [ngClass]="classes"
-    [type]="submit ? 'submit' : 'button'"
+    [ngClass]="_classes()"
+    [type]="submit() ? 'submit' : 'button'"
     mat-button
 >
-    <mat-icon *ngIf="icon" [svgIcon]="icon"></mat-icon>
-    <span>{{ label }}</span>
+    @if (icon(); as icon) {
+        <mat-icon [svgIcon]="icon"></mat-icon>
+    }
+
+    <span>{{ label() }}</span>
 </button>
 
-<div *ngIf="showDot" class="dot"></div>
+@if (showDot()) {
+    <div class="dot"></div>
+}
diff --git a/src/lib/buttons/icon-button/icon-button.component.ts b/src/lib/buttons/icon-button/icon-button.component.ts
index 6f2c018..940eda0 100644
--- a/src/lib/buttons/icon-button/icon-button.component.ts
+++ b/src/lib/buttons/icon-button/icon-button.component.ts
@@ -1,37 +1,36 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
-import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
-import { randomString } from '../../utils';
-import { NgClass, NgIf } from '@angular/common';
+import { NgClass } from '@angular/common';
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, EventEmitter, inject, input, Output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { StopPropagationDirective } from '../../directives';
 import { RouterLink } from '@angular/router';
+import { StopPropagationDirective } from '../../directives';
+import { randomString } from '../../utils';
+import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
 
 @Component({
     selector: 'iqser-icon-button',
     templateUrl: './icon-button.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [NgClass, MatButtonModule, NgIf, MatIconModule, StopPropagationDirective],
+    imports: [NgClass, MatButtonModule, MatIconModule, StopPropagationDirective],
 })
 export class IconButtonComponent {
-    @Input({ required: true }) label!: string;
-    @Input() buttonId = `${randomString()}-icon-button`;
-    @Input() icon?: string;
-    @Input() showDot = false;
-    @Input() active = false;
-    @Input() disabled = false;
-    @Input() submit = false;
-    @Input() type: IconButtonType = IconButtonTypes.default;
-    @Output() readonly action = new EventEmitter<MouseEvent>();
     protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
-
-    get classes(): Record<string, boolean> {
+    readonly label = input.required<string>();
+    readonly buttonId = input(`${randomString()}-icon-button`);
+    readonly icon = input<string>();
+    readonly showDot = input(false, { transform: booleanAttribute });
+    readonly active = input(false, { transform: booleanAttribute });
+    readonly disabled = input(false, { transform: booleanAttribute });
+    readonly submit = input(false, { transform: booleanAttribute });
+    readonly type = input<IconButtonType>(IconButtonTypes.default);
+    protected readonly _classes = computed(() => {
         return {
-            overlay: this.showDot,
-            [this.type]: true,
-            'has-icon': !!this.icon,
-            active: this.active,
+            overlay: this.showDot(),
+            [this.type()]: true,
+            'has-icon': !!this.icon(),
+            active: this.active(),
         };
-    }
+    });
+    @Output() readonly action = new EventEmitter<MouseEvent>();
 }