List

<!-- List -->
<div class="w-48 rounded-lg border border-main-border bg-surface p-1"></div>
 
<!-- List Button/Default -->
<button
  class="inline-flex w-full cursor-pointer items-center gap-1.5 rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text disabled:pointer-events-none disabled:cursor-default disabled:opacity-50">
  List Button
</button>
 
<!-- List Button/Active -->
<button
  class="inline-flex w-full cursor-pointer items-center gap-1.5 rounded-md bg-primary/20 px-4 py-2 text-left text-sm text-primary focus:outline-none disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 rtl:text-right">
  List Button
</button>
 
<!-- List Button/Disabled -->
<button
  disabled="true"
  class="inline-flex w-full cursor-pointer items-center gap-1.5 rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text disabled:pointer-events-none disabled:cursor-default disabled:opacity-50">
  List Button
</button>
 
<!-- List Button/Default With Icon -->
<button
  type="button"
  class="inline-flex w-full cursor-pointer items-center gap-2 rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text">
  <svg
    stroke="currentColor"
    fill="none"
    stroke-width="2"
    viewBox="0 0 24 24"
    stroke-linecap="round"
    stroke-linejoin="round"
    height="1em"
    width="1em"
    xmlns="http://www.w3.org/2000/svg">
    <path d="m3 21 1.9-5.7a8.5 8.5 0 1 1 3.8 3.8z"></path>
  </svg>
  List Button
</button>
 
<!-- List Button/Active With Icon -->
<button
  class="inline-flex w-full cursor-pointer items-center gap-2 rounded-md bg-primary/20 px-4 py-2 text-left text-sm text-primary focus:outline-none rtl:text-right">
  <svg
    stroke="currentColor"
    fill="currentColor"
    stroke-width="0"
    viewBox="0 0 496 512"
    height="1em"
    width="1em"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 96c48.6 0 88 39.4 88 88s-39.4 88-88 88-88-39.4-88-88 39.4-88 88-88zm0 344c-58.7 0-111.3-26.6-146.5-68.2 18.8-35.4 55.6-59.8 98.5-59.8 2.4 0 4.8.4 7.1 1.1 13 4.2 26.6 6.9 40.9 6.9 14.3 0 28-2.7 40.9-6.9 2.3-.7 4.7-1.1 7.1-1.1 42.9 0 79.7 24.4 98.5 59.8C359.3 421.4 306.7 448 248 448z"></path>
  </svg>
  List Button
</button>
 
<!-- List Button/Disabled With Icon -->
<button
  type="button"
  disabled="true"
  class="inline-flex w-full cursor-pointer items-center gap-2 rounded-md px-4 py-2 text-left text-sm hover:bg-accent hover:text-accent-text disabled:pointer-events-none disabled:cursor-default disabled:opacity-50">
  <svg
    stroke="currentColor"
    fill="none"
    stroke-width="2"
    viewBox="0 0 24 24"
    stroke-linecap="round"
    stroke-linejoin="round"
    height="1em"
    width="1em"
    xmlns="http://www.w3.org/2000/svg">
    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
    <polyline points="7 10 12 15 17 10"></polyline>
    <line x1="12" x2="12" y1="15" y2="3"></line>
  </svg>
  List Button
</button>