Dream mark up for buttons

I'm on my tablet so I'll probably need to go more in depth once I get back to my laptop tonight. I also don't have a D8 install yet to really investigate the CSS but I should have one either tonight or tomorrow.

The biggest redundancy I see is that we're using a .button class with the button tag. I don't think it's necessary because we can define the button directly in the css without the class. The only time, as far as I'm concerned, when we actually need .button is when we're styling a non-button element to look like one. Those will need to be identified at some point.

So, what remains then are the "special" cases: primary, small, and danger.

Primary is something that I need to investigate the markup to see what it's supposed to mean in the context of which it's used. A guess/assumption would be where there are multiple buttons and .primary indicates the most important one. However, from this hypothesis on what primary means, is there really a case where multiple buttons are present? And if so, what sort of benefit is primary really providing that can't be covered by say... .small?

The remaining classes small and danger are pretty straight forward.

So, these are the questions we need to ask:

1. In core, will there be instances where a non button will need to be styled like a button?
2. What is the definition of .primary and what is the use case(s) for it?

Alright, so a rough proposal of HTML and CSS...

<button type="button">Button (button)</button>
<button class="btn-primary" type="button">Primary (button)</button>
<button type="button" disabled>Button (button, disabled)</button>
<button class="btn-small" type="button">Small</button>
<button class="btn-small" type="button" disabled>Small (disabled)</button>
<button class="btn-small btn-primary" type="button">Small Primary</button>
<button class="btn-danger" type="button">Danger action</button>
<button class="btn-danger" type="button" disabled>Danger action (disabled)</button>

button {}
button[disabled] {}
button.btn-primary {}
button.btn-small {}
button.btn-danger {}

So, we could define size, color, etc with button, override just the color with button[disabled].

I can go more in depth later when I can actually write out some tests and more detailed CSS and after answering my two questions above.I hope that this will facilitate discussion because I don't necessarily see this way as the best way but rather what I would do if I were building something from the ground up.

@Courtney B.

For primary buttons, the use-case is where we want to draw attention to the central action of a form when it has several. The classic case is the node edit form, where we have save, preview, delete. Since save is the main point of the form, 'save' is the primary button; themes would give it more visual weight.

For instances of non-buttons styled as buttons, we decided to style action links (local tasks) as buttons in D8: #1167350: Action links were ignored . There is also the need to style <button> elements as non-buttons. For the general case, see #1719640: Use 'button' element instead of empty links. Specifically, in Seven, we decided that styling danger buttons as red buttons drew too much attention (making them more prominent than the primary action), but we still wanted to set them apart as destructive actions. We chose an understated "link" style, so danger buttons actually get class="link link--danger".

All of this is the nitty-gritty that leads to a general principle: if it should have a certain appearance, apply that style using a class. This avoids tying styles to particular tags and opens the door to really flexible and modular stylesheets. In the end, <button class="button"> is not redundant at all, it’s an action (which is really all the HTML tag means) and it’s styled like a button.

The approach taken here has additional practical advantages. We don’t have to remember all of the various elements we would normally style as buttons (button, input[type="submit"], etc.). We also keep the specificity of our selectors as low as possible by avoiding qualifiers like button.btn-danger.

For more details on the general principles we’re trying to follow, check out #1887918: [Obsolete] CSS architecture (for Drupal 9).