Buttons

Every variant is styled through one selector group, so <button>, <input type="submit">, <input type="button">, <input type="reset">, and anything with role="button" get the same treatment.

Variants

<div class="flex" style="flex-wrap: wrap">
  <button>Default</button>
  <button class="primary">Primary</button>
  <button class="secondary">Secondary</button>
  <button class="ghost">Ghost</button>
  <button class="contrast">Contrast</button>
</div>

Default and .primary render identically today. .primary exists so intent is explicit in markup and so the two can diverge later. .contrast rebinds --color to --fallback-color, which produces a neutral button on any hue.

Any element

a[role=button] 
<div class="flex" style="flex-wrap: wrap; align-items: center">
  <button type="button">button</button>
  <input type="submit" value="input[submit]" />
  <input type="reset" value="input[reset]" />
  <a href="#elements" role="button">a[role=button]</a>
</div>

States

:disabled and .disabled both swap the color scale for the greyscale one. Use .disabled when the element is not a form control.

Disabled link button 
<div class="flex" style="flex-wrap: wrap">
  <button disabled>Disabled</button>
  <button class="secondary" disabled>Disabled secondary</button>
  <a href="#states" role="button" class="disabled">Disabled link button</a>
</div>

Shape

.rounded sets --border-radius: 2rem on the element. The radius is a variable, so you can set it yourself anywhere. 

<div class="flex" style="flex-wrap: wrap">
  <button class="rounded">Rounded</button>
  <button class="secondary rounded">Rounded secondary</button>
  <button style="--border-radius: 0">Square</button>
</div>

Unstyling a button

.semantic applies all: unset and keeps the pointer cursor. Use it when you need a real <button> for accessibility but no button chrome.

Read more about , or dismiss it. 

<p>
  Read more about
  <button class="semantic" style="text-decoration: underline">this topic</button>,
  or dismiss it.
</p>

Groups and footers

.flex handles rows. Inside article > footer, contents are pushed right automatically.

Delete this project?

This cannot be undone.

<article class="card">
  <h3>Delete this project?</h3>
  <p>This cannot be undone.</p>
  <footer class="flex">
    <button class="secondary">Cancel</button>
    <button>Delete</button>
  </footer>
</article>