Buttons

<button
  class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-primary px-3 text-sm text-primary-text transition-colors duration-150 hover:bg-primary/90 active:brightness-95"
>
  Button
</button>

<div
  class="flex items-start justify-center flex-col md:items-center md:flex-row gap-5"
>
  <!-- Primary -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-primary px-3 text-sm text-primary-text transition-colors duration-150 hover:bg-primary/90 active:brightness-95"
  >
    Primary
  </button>
 
  <!-- Secondary -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-secondary px-3 text-sm text-secondary-text transition-colors duration-150 hover:bg-secondary/90 active:brightness-95"
  >
    Secondary
  </button>
 
  <!-- Accent -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-accent px-3 text-sm text-accent-text transition-colors duration-150 hover:bg-accent/90 active:brightness-95"
  >
    Accent
  </button>
 
  <!-- Muted -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-muted px-3 text-sm text-muted-text transition-colors duration-150 hover:bg-muted/90 active:brightness-95"
  >
    Muted
  </button>
 
  <!-- Danger -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-danger px-3 text-sm text-danger-filled-text shadow-sm transition-colors duration-150 hover:bg-danger/90 active:brightness-95"
  >
    Danger
  </button>
</div>

<div class="flex items-center justify-center flex-col md:flex-row gap-5">
  <!-- Primary -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 text-sm rounded-md h-10 px-3 hover:bg-primary hover:text-primary-text border border-primary text-primary"
  >
    Primary
  </button>
 
  <!-- Accent -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 text-sm rounded-md h-10 px-3 hover:bg-accent hover:text-accent-text border border-accent text-accent-text"
  >
    Accent
  </button>
 
  <!-- Muted -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 text-sm rounded-md h-10 px-3 hover:bg-muted hover:text-muted-text border border-muted text-muted-text"
  >
    Muted
  </button>
 
  <!-- Danger -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 text-sm rounded-md h-10 px-3 hover:bg-danger hover:text-danger-filled-text border border-danger text-danger"
  >
    Danger
  </button>
</div>

<!-- Primary -->
<button
  class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out text-sm rounded-md h-10 px-3 hover:bg-primary hover:text-primary-text text-primary"
>
  <p>Primary</p>
</button>
 
<!-- Accent -->
<button
  class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out text-sm rounded-md h-10 px-3 hover:bg-accent text-accent-text"
>
  <p>Accent</p>
</button>
 
<!-- Muted -->
<button
  class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out text-sm rounded-md h-10 px-3 hover:bg-muted text-muted-text"
>
  <p>Muted</p>
</button>
 
<!-- Danger -->
<button
  class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out text-sm rounded-md h-10 px-3 hover:bg-danger hover:text-danger-filled-text text-danger"
>
  <p>Danger</p>
</button>

<div
  class="flex items-start justify-center flex-col md:items-center md:flex-row gap-5"
>
  <!-- Icon -->
  <button
    class="inline-flex h-10 w-10 items-center justify-center gap-1 rounded-md bg-primary text-sm text-primary-text transition-colors duration-150 hover:bg-primary/90 active:brightness-95"
  >
    B
  </button>
 
  <!-- Small -->
  <button
    class="inline-flex h-8 items-center justify-center gap-1 rounded-md bg-primary px-2.5 text-sm text-primary-text transition-colors duration-150 hover:bg-primary/90 active:brightness-95"
  >
    Button
  </button>
 
  <!-- Medium -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-primary px-3 text-sm text-primary-text transition-colors duration-150 hover:bg-primary/90 active:brightness-95"
  >
    Button
  </button>
 
  <!-- Large -->
  <button
    class="inline-flex h-11 items-center justify-center gap-1 rounded-md bg-primary px-8 text-sm text-primary-text transition-colors duration-150 hover:bg-primary/90 active:brightness-95"
  >
    Button
  </button>
</div>

<div
  class="flex items-start justify-center flex-col md:items-center md:flex-row gap-5"
>
  <!-- Small -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-sm bg-primary px-3 text-sm text-primary-text transition-colors duration-150 hover:bg-primary/90 active:brightness-95"
  >
    Button
  </button>
 
  <!-- Medium -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-primary px-3 text-sm text-primary-text transition-colors duration-150 hover:bg-primary/90 active:brightness-95"
  >
    Button
  </button>
 
  <!-- Large -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-lg bg-primary px-3 text-sm text-primary-text transition-colors duration-150 hover:bg-primary/90 active:brightness-95"
  >
    Button
  </button>
 
  <!-- Full -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-full bg-primary px-3 text-sm text-primary-text transition-colors duration-150 hover:bg-primary/90 active:brightness-95"
  >
    Button
  </button>
</div>