TYPO3 Core

Creating a button in a TYPO3 backend module and setting a different class:

$buttonBar  = $moduleTemplate->getDocHeaderComponent()->getButtonBar();
$lockButton = $buttonBar->makeLinkButton();
$lockButton->setClasses('btn-warning');

results in a the following class attribute:

<a href="..." class="btn btn-sm btn-default btn-warning">
</a>

The style of "btn-warning" is never used, as "btn-default" is still in the class list.

There is currently no way to remove the class "btn-default".

Looks like a mismatch in the backend.css file, where "btn-warning" is defined before "btn-default".

.btn-warning{--bs-btn-color:#000;--bs-btn-bg:#e8a33d;--bs-btn-border-color:#e8a33d;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#ebb15a;--bs-btn-hover-border-color:#eaac50;--bs-btn-focus-shadow-rgb:197,139,52;--bs-btn-active-color:#000;--bs-btn-active-bg:#edb564;--bs-btn-active-border-color:#eaac50;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:#e8a33d;--bs-btn-disabled-border-color:#e8a33d}
.btn-danger{--bs-btn-color:#fff;--bs-btn-bg:#c83c3c;--bs-btn-border-color:#c83c3c;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#aa3333;--bs-btn-hover-border-color:#a03030;--bs-btn-focus-shadow-rgb:208,89,89;--bs-btn-active-color:#fff;--bs-btn-active-bg:#a03030;--bs-btn-active-border-color:#962d2d;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;--bs-btn-disabled-bg:#c83c3c;--bs-btn-disabled-border-color:#c83c3c}
.btn-light{--bs-btn-color:#000;--bs-btn-bg:rgb(245, 245, 245);--bs-btn-border-color:rgb(245, 245, 245);--bs-btn-hover-color:#000;--bs-btn-hover-bg:#d0d0d0;--bs-btn-hover-border-color:#c4c4c4;--bs-btn-focus-shadow-rgb:208,208,208;--bs-btn-active-color:#000;--bs-btn-active-bg:#c4c4c4;--bs-btn-active-border-color:#b8b8b8;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:rgb(245, 245, 245);--bs-btn-disabled-border-color:rgb(245, 245, 245)}
.btn-default{--bs-btn-color:#000;--bs-btn-bg:rgb(245, 245, 245);--bs-btn-border-color:rgb(245, 245, 245);--bs-btn-hover-color:#000;--bs-btn-hover-bg:#f7f7f7;--bs-btn-hover-border-color:#f6f6f6;--bs-btn-focus-shadow-rgb:208,208,208;--bs-btn-active-color:#000;--bs-btn-active-bg:#f7f7f7;--bs-btn-active-border-color:#f6f6f6;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;--bs-btn-disabled-bg:rgb(245, 245, 245);--bs-btn-disabled-border-color:rgb(245, 245, 245)}