diff --git a/src/addons/mod/assign/pages/submission-review/submission-review.html b/src/addons/mod/assign/pages/submission-review/submission-review.html
index fe477e715..dd7d7950a 100644
--- a/src/addons/mod/assign/pages/submission-review/submission-review.html
+++ b/src/addons/mod/assign/pages/submission-review/submission-review.html
@@ -13,7 +13,7 @@
     </ion-toolbar>
 
     <core-navbar-buttons slot="end">
-        <ion-button [hidden]="!canSaveGrades" fill="clear" (click)="submitGrade()">
+        <ion-button [class.hidden]="!canSaveGrades" fill="clear" (click)="submitGrade()">
             {{ 'core.done' | translate }}
         </ion-button>
     </core-navbar-buttons>
diff --git a/src/addons/mod/quiz/pages/player/player.html b/src/addons/mod/quiz/pages/player/player.html
index b9c3574f1..e3de19c9b 100644
--- a/src/addons/mod/quiz/pages/player/player.html
+++ b/src/addons/mod/quiz/pages/player/player.html
@@ -11,7 +11,7 @@
         </ion-title>
 
         <ion-buttons slot="end">
-            <ion-button fill="clear" id="addon-mod_quiz-connection-error-button" [hidden]="!autoSaveError"
+            <ion-button fill="clear" id="addon-mod_quiz-connection-error-button" [class.hidden]="!autoSaveError"
                 (click)="showConnectionError($event)" [ariaLabel]="'addon.mod_quiz.connectionerror' | translate" aria-haspopup="dialog">
                 <ion-icon name="fas-circle-exclamation" slot="icon-only" aria-hidden="true" />
             </ion-button>
diff --git a/src/addons/mod/workshop/pages/submission/submission.html b/src/addons/mod/workshop/pages/submission/submission.html
index 6c5a1afb1..dde29a697 100644
--- a/src/addons/mod/workshop/pages/submission/submission.html
+++ b/src/addons/mod/workshop/pages/submission/submission.html
@@ -10,8 +10,7 @@
             </h1>
         </ion-title>
         <ion-buttons slot="end" [hidden]="!loaded">
-            <ion-button *ngIf="assessmentId && access.assessingallowed" fill="clear" (click)="saveAssessment()"
-                [ariaLabel]="'core.save' | translate">
+            <ion-button *ngIf="assessmentId && access.assessingallowed" fill="clear" (click)="saveAssessment()">
                 {{ 'core.save' | translate }}
             </ion-button>
             <ion-button *ngIf="canAddFeedback" fill="clear" (click)="saveEvaluation()">
diff --git a/src/addons/notes/pages/list/list.html b/src/addons/notes/pages/list/list.html
index 058c56ec6..7cdafa23f 100644
--- a/src/addons/notes/pages/list/list.html
+++ b/src/addons/notes/pages/list/list.html
@@ -11,7 +11,8 @@
     </ion-toolbar>
 </ion-header>
 <core-navbar-buttons slot="end">
-    <ion-button [hidden]="!canDeleteNotes" slot="end" fill="clear" (click)="toggleDelete()" [ariaLabel]="'core.toggledelete' | translate">
+    <ion-button [class.hidden]="!canDeleteNotes" slot="end" fill="clear" (click)="toggleDelete()"
+        [ariaLabel]="'core.toggledelete' | translate">
         <ion-icon name="fas-pen" slot="icon-only" aria-hidden="true" />
     </ion-button>
     <core-context-menu>
diff --git a/src/core/components/context-menu/core-context-menu.html b/src/core/components/context-menu/core-context-menu.html
index dee543e37..175bcd677 100644
--- a/src/core/components/context-menu/core-context-menu.html
+++ b/src/core/components/context-menu/core-context-menu.html
@@ -1,4 +1,4 @@
-<ion-button [hidden]="hideMenu" fill="clear" [ariaLabel]="ariaLabel" (click)="showContextMenu($event)" aria-haspopup="true"
+<ion-button [class.hidden]="hideMenu" fill="clear" [ariaLabel]="ariaLabel" (click)="showContextMenu($event)" aria-haspopup="true"
     [attr.aria-controls]="uniqueId">
     <ion-icon [name]="icon" slot="icon-only" aria-hidden="true" />
 </ion-button>
diff --git a/src/core/components/navbar-buttons/navbar-buttons.ts b/src/core/components/navbar-buttons/navbar-buttons.ts
index 349377eec..631732347 100644
--- a/src/core/components/navbar-buttons/navbar-buttons.ts
+++ b/src/core/components/navbar-buttons/navbar-buttons.ts
@@ -40,12 +40,12 @@ const BUTTON_HIDDEN_CLASS = 'core-navbar-button-hidden';
  *
  * You can use the [hidden] input to hide all the inner buttons if a certain condition is met.
  *
- * IMPORTANT: Do not use *ngIf in the buttons inside this component, it can cause problems. Please use [hidden] instead.
+ * IMPORTANT: Do not use *ngIf in the buttons inside this component, it can cause problems. Please use [class.hidden] instead.
  *
  * Example usage:
  *
  * <core-navbar-buttons slot="end">
- *     <ion-button [hidden]="!buttonShown" [attr.aria-label]="Do something" (click)="action()">
+ *     <ion-button [class.hidden]="!buttonShown" [ariaLabel]="Do something" (click)="action()">
  *         <ion-icon name="funnel" slot="icon-only" aria-hidden="true"></ion-icon>
  *     </ion-button>
  * </core-navbar-buttons>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 4e85f1003..2c4350d3e 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -488,7 +488,7 @@ video::-webkit-media-text-track-display {
 /**
  * https://github.com/ionic-team/ionic-framework/blob/6ffbdbb3b2b69290cf25753d535bc7483bd7c6e8/BREAKING.md#css-utilities
  */
-[hidden] {
+[hidden], .hidden {
     display: none !important;
 }