MijnUI

Default Button

button.html

<button
  class="text-default-text inline-flex h-10 items-center justify-center gap-1 rounded-md bg-default px-3.5 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
  Button
</button>

Button Colors

button-colors.html

<div class="flex flex-wrap items-center gap-4">
  <!-- Default -->
  <button
    class="text-default-text inline-flex h-10 items-center justify-center gap-1 rounded-md bg-default px-3.5 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Default
  </button>
 
  <!-- Primary -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-primary px-3.5 text-sm text-primary-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Primary
  </button>
 
  <!-- Secondary -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-secondary px-3.5 text-sm text-secondary-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Secondary
  </button>
 
  <!-- Success -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-success px-3.5 text-sm text-success-filled-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Success
  </button>
 
  <!-- Info -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-info px-3.5 text-sm text-info-filled-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Info
  </button>
 
  <!-- Warning -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-warning px-3.5 text-sm text-warning-filled-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Warning
  </button>
 
  <!-- Danger -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-danger px-3.5 text-sm text-danger-filled-text transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Danger
  </button>
</div>

Button Variants

Outlined

button-outline.html

<div class="flex flex-wrap items-center gap-4">
  <!-- Default -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 border bg-transparent border-main-border text-default-text hover:bg-accent hover:text-accent-text">
    Default
  </button>
 
  <!-- Primary -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 border bg-transparent border-primary text-primary hover:bg-primary hover:text-primary-text">
    Primary
  </button>
 
  <!-- Secondary -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 border bg-transparent border-secondary text-secondary hover:bg-secondary hover:text-secondary-text">
    Secondary
  </button>
 
  <!-- Success -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 border bg-transparent border-success text-success hover:bg-success hover:text-success-filled-text">
    Success
  </button>
 
  <!-- Info -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 border bg-transparent border-info text-info hover:bg-info hover:text-info-filled-text">
    Info
  </button>
 
  <!-- Warning -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 border bg-transparent border-warning text-warning hover:bg-warning hover:text-warning-filled-text">
    Warning
  </button>
 
  <!-- Danger -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 border bg-transparent border-danger text-danger hover:bg-danger hover:text-danger-filled-text">
    Danger
  </button>
</div>

Subtle

button-subtle.html

<div class="flex flex-wrap items-center gap-4">
  <!-- Default -->
  <button
    class="text-default-text inline-flex h-10 items-center justify-center gap-1 rounded-md bg-default/40 px-3.5 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Default
  </button>
 
  <!-- Primary -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-primary/20 px-3.5 text-sm text-primary transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Primary
  </button>
 
  <!-- Secondary -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-secondary/20 px-3.5 text-sm text-secondary transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Secondary
  </button>
 
  <!-- Success -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-success/20 px-3.5 text-sm text-success transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Success
  </button>
 
  <!-- Info -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-info/20 px-3.5 text-sm text-info transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Info
  </button>
 
  <!-- Warning -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-warning/20 px-3.5 text-sm text-warning transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Warning
  </button>
 
  <!-- Danger -->
  <button
    class="inline-flex h-10 items-center justify-center gap-1 rounded-md bg-danger/20 px-3.5 text-sm text-danger transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Danger
  </button>
</div>

Ghost

button-ghost.html

<div class="flex flex-wrap items-center gap-4">
  <!-- Default -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 text-default-text hover:bg-accent hover:text-accent-text">
    Default
  </button>
 
  <!-- Primary -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 text-primary hover:bg-primary hover:text-primary-text">
    Primary
  </button>
 
  <!-- Secondary -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 text-secondary hover:bg-secondary hover:text-secondary-text">
    Secondary
  </button>
 
  <!-- Success -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 text-success hover:bg-success hover:text-success-filled-text">
    Success
  </button>
 
  <!-- Info -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 text-info hover:bg-info hover:text-info-filled-text">
    Info
  </button>
 
  <!-- Warning -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 text-warning hover:bg-warning hover:text-warning-filled-text">
    Warning
  </button>
 
  <!-- Danger -->
  <button
    class="inline-flex items-center justify-center gap-1 transition-colors duration-200 ease-in-out active:brightness-90 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main rounded-md text-sm h-10 px-3.5 text-danger hover:bg-danger hover:text-danger-filled-text">
    Danger
  </button>
</div>

Radius

button-radius.html

<div class="flex flex-wrap items-center gap-4">
  <!-- Radius sm -->
  <button
    class="text-default-text inline-flex h-10 items-center justify-center gap-1 rounded-sm bg-default px-3.5 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Button
  </button>
 
  <!-- Radius md -->
  <button
    class="text-default-text inline-flex h-10 items-center justify-center gap-1 rounded-md bg-default px-3.5 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Button
  </button>
 
  <!-- Radius lg -->
  <button
    class="text-default-text inline-flex h-10 items-center justify-center gap-1 rounded-lg bg-default px-3.5 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Button
  </button>
 
  <!-- Radius full -->
  <button
    class="text-default-text inline-flex h-10 items-center justify-center gap-1 rounded-full bg-default px-3.5 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    Button
  </button>
</div>

Sizes

button-sizes.html

<div class="flex flex-wrap items-end gap-4">
  <!-- Size xs -->
  <button
    class="text-default-text inline-flex h-8 items-center justify-center gap-1 rounded-md bg-default px-2 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    xs
  </button>
 
  <!-- Size sm -->
  <button
    class="text-default-text inline-flex h-9 items-center justify-center gap-1 rounded-md bg-default px-3 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    sm
  </button>
 
  <!-- Size md -->
  <button
    class="text-default-text inline-flex h-10 items-center justify-center gap-1 rounded-md bg-default px-3.5 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    md
  </button>
 
  <!-- Size lg -->
  <button
    class="text-default-text inline-flex h-11 items-center justify-center gap-1 rounded-md bg-default px-5 text-base transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    lg
  </button>
</div>

Icon Only

button-icon-only.html

<div class="flex flex-wrap items-end gap-4">
  <!-- Size xs -->
  <button
    class="text-default-text inline-flex size-8 items-center justify-center gap-0 rounded-md bg-default px-0 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    xs
  </button>
 
  <!-- Size sm -->
  <button
    class="text-default-text inline-flex size-9 items-center justify-center gap-0 rounded-md bg-default px-0 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    sm
  </button>
 
  <!-- Size md -->
  <button
    class="text-default-text inline-flex size-10 items-center justify-center gap-0 rounded-md bg-default px-0 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    md
  </button>
 
  <!-- Size lg -->
  <button
    class="text-default-text inline-flex size-11 items-center justify-center gap-0 rounded-md bg-default px-0 text-sm transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    lg
  </button>
 
  <!-- Size xl -->
  <button
    class="text-md text-default-text inline-flex size-12 items-center justify-center gap-0 rounded-md bg-default px-0 transition-colors duration-200 ease-in-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main active:brightness-90 disabled:pointer-events-none disabled:opacity-50">
    xl
  </button>
</div>

Button

On this page