Button

<button>Click me</button>

<button>
  <svg><!-- icon --></svg>
  Download
</button>

<style>
  button {
    min-width: 10rem;
  }
</style>

<button>
  <svg><!-- save --></svg>
  Save
  <kbd>⌘S</kbd>
</button>

<button class="outline">
  Find
  <kbd>⌘K</kbd>
</button>

<button class="outline">Click me</button>

<button class="secondary">Click me</button>

<button class="ghost">Click me</button>

<button class="destructive">Delete</button>
<button class="ghost destructive">Delete</button>

<button class="link">Click me</button>

<button class="round">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="icon icon-tabler icons-tabler-outline icon-tabler-user"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
    <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
  </svg>
</button>

<button class="square">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
    <path d="M7 9l5 -5l5 5" />
    <path d="M12 4l0 12" />
  </svg>
</button>

<button aria-busy="true">Please wait…</button>