Buttons

A <button> or an <a role="button"> is already a button, with no class and no attribute. data-variant picks another look, data-size="sm" makes the small uppercase one, and a <menu> lays a row of them out.

Basic

<menu>
  <li><button>Build the site</button></li>
  <li><button data-variant="line">Watch</button></li>
  <li><button data-variant="ghost">Clear the cache</button></li>
  <li><button data-size="sm">Log</button></li>
</menu>

The <menu> gives the row its gap and drops the bullets; each button still works on its own.

Toggle

<p role="group" aria-label="Range">
  <button aria-pressed="true" data-variant="light">Week</button>
  <button aria-pressed="false" data-variant="light">Month</button>
</p>

aria-pressed carries the state, so the pressed button reads right to a screen reader and styles itself.

Notes

• Variants are data-variant="line", "ghost" and "light"; data-size="sm" sets the small uppercase size.
• An <a role="button"> takes the same attributes, so a link can look like a button without pretending to be one.
• aria-pressed="true" carries the state, and the pressed button fills with the page ink.