Change record status: 
Project: 
Introduced in branch: 
8.x
Description: 

All UI elements presented as buttons now use a consistent set of HTML classes. Core themes now use consolidated CSS associated with these new style hooks, which also now include basic style rules for spacing adjacent buttons.

Previously, button form controls used class="form-button", action links used class="button add" and action links were not styled as buttons.

  • All buttons have class="button", including links, form submits and <button> elements;
  • Action links have class="button button-action";
  • The new primary form buttons have class="button button-primary";
  • The new ‘danger’ form buttons have class="button button-danger";

Themes can style the new core markup as follows:

.button {
   /* base button styles */
}
.button-action {
  /* overrides and additions for action links */
}
/* etc. */

Note that, <button> elements without classes are no longer styled by default in core themes. Contributed themes are encouraged to follow this pattern, as button elements don’t always need to appear as buttons in the UI, and indeed do not always do so in Drupal core itself.

Impacts: 
Themers