Button group

<menu data-group> joins a row of buttons into one block. Use aria-pressed to mark which one is on.

Basic

<menu data-group>
  <li><button data-variant="line">Day</button></li>
  <li><button data-variant="line" aria-pressed="true">Week</button></li>
  <li><button data-variant="line">Month</button></li>
</menu>

Only the outer corners are rounded, and the borders between the buttons overlap into one line.

Notes

• aria-pressed="true" is the state, and the pressed button fills with the page ink.
• A <menu> without data-group keeps the standard gap between its buttons.