Buttons

Showcasing MICL buttons

Text buttons

Elevated buttons

Filled buttons

Tonal buttons

Outlined buttons

Toggle buttons

Code example

<button type="button" class="micl-button-tonal-s">Click</button>

<button type="button" class="micl-button-outlined-xl micl-button--square">
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
  Click
</button>

<button class="micl-button-filled-m micl-button--toggle micl-button--selected">Click</button>

<button
  type="button"
  id="mybutton"
  class="micl-button-tonal-l micl-button--toggle"
  commandfor="mybutton"
  command="--micl-toggle"
>
  <span
    class="micl-button__icon material-symbols-outlined"
    data-miclicon="edit"
    data-micliconselected="draw"
    aria-hidden="true"
  ></span>
  Click
</button>