<section class="bg-surface-container rounded-2xl p-4 flex flex-col">
    <div class="flex items-center gap-4 py-2">
      <p class="font-bold">Basic</p>
      <button class="md-button">Basic</button>
      <button disabled class="md-button">Disabled</button>
      <a href="https://www.google.com/" target="_blank" class="md-button">Link</a>
    </div>
    <hr class="text-primary"/>
    <div class="flex items-center gap-4 py-2">
      <p class="font-bold">Stroked</p>
      <button class="md-button-outlined">Basic</button>
      <button disabled class="md-button-outlined">Disabled</button>
      <a href="https://www.google.com/" target="_blank" class="md-button-outlined">Link</a>
    </div>
    <hr class="text-primary"/>
    <div class="flex items-center gap-4 py-2">
      <p class="font-bold">Tonal</p>
      <button class="md-button-tonal">Basic</button>
      <button disabled class="md-button-tonal">Disabled</button>
      <a href="https://www.google.com/" target="_blank" class="md-button-tonal">Link</a>
    </div>
    <hr class="text-primary"/>
    <div class="flex items-center gap-4 py-2">
      <p class="font-bold">Filled</p>
      <button class="md-button-filled">Basic</button>
      <button disabled class="md-button-filled">Disabled</button>
      <a href="https://www.google.com/" target="_blank" class="md-button-filled">Link</a>
    </div>
    <hr class="text-primary"/>
    <div class="flex items-center gap-4 py-2">
      <p class="font-bold">Raised</p>
      <button class="md-button-elevated">Basic</button>
      <button disabled class="md-button-elevated">Disabled</button>
      <a href="https://www.google.com/" target="_blank" class="md-button-elevated">Link</a>
    </div>
  </section>