Button

<div class="flex flex-wrap gap-4">
  <button class="btn">Default</button>
  <button class="btn btn-neutral">Neutral</button>
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-secondary">Secondary</button>
  <button class="btn btn-accent">Accent</button>
  <button class="btn btn-info">Info</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-warning">Warning</button>
  <button class="btn btn-error">Error</button>
</div>

<button class="btn btn-xs sm:btn-sm md:btn-md lg:btn-lg xl:btn-xl">Responsive</button>

<div class="flex flex-wrap gap-4">
  <button class="btn btn-soft">Default</button>
  <button class="btn btn-soft btn-primary">Primary</button>
  <button class="btn btn-soft btn-secondary">Secondary</button>
  <button class="btn btn-soft btn-accent">Accent</button>
  <button class="btn btn-soft btn-info">Info</button>
  <button class="btn btn-soft btn-success">Success</button>
  <button class="btn btn-soft btn-warning">Warning</button>
  <button class="btn btn-soft btn-error">Error</button>
</div>

<div class="flex flex-wrap gap-4">
  <button class="btn btn-outline">Default</button>
  <button class="btn btn-outline btn-primary">Primary</button>
  <button class="btn btn-outline btn-secondary">Secondary</button>
  <button class="btn btn-outline btn-accent">Accent</button>
  <button class="btn btn-outline btn-info">Info</button>
  <button class="btn btn-outline btn-success">Success</button>
  <button class="btn btn-outline btn-warning">Warning</button>
  <button class="btn btn-outline btn-error">Error</button>
</div>

<div class="flex flex-wrap gap-4">
  <button class="btn btn-dash">Default</button>
  <button class="btn btn-dash btn-primary">Primary</button>
  <button class="btn btn-dash btn-secondary">Secondary</button>
  <button class="btn btn-dash btn-accent">Accent</button>
  <button class="btn btn-dash btn-info">Info</button>
  <button class="btn btn-dash btn-success">Success</button>
  <button class="btn btn-dash btn-warning">Warning</button>
  <button class="btn btn-dash btn-error">Error</button>
</div>

<div class="flex flex-wrap gap-4">
  <button class="btn btn-active">Default</button>
  <button class="btn btn-active btn-primary">Primary</button>
  <button class="btn btn-active btn-secondary">Secondary</button>
  <button class="btn btn-active btn-accent">Accent</button>
  <button class="btn btn-active btn-info">Info</button>
  <button class="btn btn-active btn-success">Success</button>
  <button class="btn btn-active btn-warning">Warning</button>
  <button class="btn btn-active btn-error">Error</button>
</div>

<div class="flex justify-start gap-4 flex-wrap">
  <button class="btn btn-ghost">Ghost</button>
  <button class="btn btn-link">Link</button>
  <button class="btn btn-wide">Wide</button>
  <button class="btn" disabled="disabled">Disabled using attribute</button>
  <button class="btn btn-square"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg></button>
  <button class="btn btn-circle"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg></button>
  <button class="btn"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="size-[1.2em]"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" /></svg>Like</button>
  <button class="btn btn-block">block</button>
  <button class="btn btn-square"><span class="loading loading-spinner"></span></button>
  <button class="btn"><span class="loading loading-spinner"></span> loading</button>
  <button class="btn bg-[#FEE502] text-[#181600] border-[#f1d800]"><svg aria-label="Kakao logo" width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path fill="#181600" d="M255.5 48C299.345 48 339.897 56.5332 377.156 73.5996C414.415 90.666 443.871 113.873 465.522 143.22C487.174 172.566 498 204.577 498 239.252C498 273.926 487.174 305.982 465.522 335.42C443.871 364.857 414.46 388.109 377.291 405.175C340.122 422.241 299.525 430.775 255.5 430.775C241.607 430.775 227.262 429.781 212.467 427.795C148.233 472.402 114.042 494.977 109.892 495.518C107.907 496.241 106.012 496.15 104.208 495.248C103.486 494.706 102.945 493.983 102.584 493.08C102.223 492.177 102.043 491.365 102.043 490.642V489.559C103.126 482.515 111.335 453.169 126.672 401.518C91.8486 384.181 64.1974 361.2 43.7185 332.575C23.2395 303.951 13 272.843 13 239.252C13 204.577 23.8259 172.566 45.4777 143.22C67.1295 113.873 96.5849 90.666 133.844 73.5996C171.103 56.5332 211.655 48 255.5 48Z"></path></svg> 카카오 로그인</button>
</div>