Is there a way to change how a form button looks?

Question

I know how to add a class to a form element and how to add a form submission button, but there are classes that are automatically added to these buttons in my Drupal 8 install.

The form I am editing has two buttons, a submit and a skip button; both the buttons look the same. I would like to add a visual clue to the difference between the buttons. The buttons get an automatic btn-primary class but I want the skip button to have a btn-outline-primary class. If I add that class with '#attributes' => ['class' => ['btn-outline-primary']], the class gets added, but the btn-primary class is still part of the button. The combination of those two classes makes the button text the same color as the button background color, and thus invisible unless you hover over the button.

Is there a way to perhaps not include the button in the template, for example {{ form.actions.skip }} but more verbose? In the sense that takes over some of the Drupal 8 automation?

<button class="btn btn-outline-primary">{{from.actions.skip.something}}</button>

Answer 1

There are two basic ways in Drupal to remove the class, a PHP hook or a Twig template. It's only possible to describe this in a general way because the question doesn't contain details about which theme and templates are in use.

For a PHP solution find out which hook is adding this class and then implement the same hook in your custom theme. If the attributes contain the specific class you've added to the form build, then remove the conflicting class.

For a Twig solution enable Twig debug, find out which template is rendering the button now, and copy it to your theme's templates folder. Then do the same thing as described before in Twig:

{% if attributes.hasClass('btn-outline-primary') %}
  <input{{ attributes.removeClass('btn-primary') }} />{{ children }}
{% else %}
  <input{{ attributes }} />{{ children }}
{% endif %}