Button Rails Components

A comprehensive collection of button components built with Tailwind CSS. Perfect for modern web applications.

Installation

1. Custom CSS

By default, Tailwind CSS now displays the default cursor () on buttons, if you want all buttons to have a pointer cursor (), add the following CSS code:

@layer base {
  button:not([disabled]),
  [role="button"]:not([disabled]) {
    cursor: pointer;
  }
}

Note: There is some debate online about using cursor pointers on buttons, but I think that for the modern web it makes sense to add it to all interactive elements like buttons. Click here to learn more about why I made this decision.

Standard Buttons

Basic buttons

Basic buttons with hover effects.

<!-- Simple buttons -->
<div class="flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    Neutral Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-blue-400/30 bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Colored Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    Secondary Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-red-300/30 bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Delete Button
  </button>
</div>

<!-- Small buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    Small Neutral Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-blue-400/30 bg-blue-600 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Small Colored Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3 py-2 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    Small Secondary Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-red-300/30 bg-red-600 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Small Delete Button
  </button>
</div>

<!-- Disabled buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" disabled class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
   Neutral Button
  </button>

  <button type="button" disabled class="flex items-center justify-center gap-1.5 rounded-lg border border-blue-400/30 bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Colored Button
  </button>

  <button type="button" disabled class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    Secondary Button
  </button>

  <button type="button" disabled class="flex items-center justify-center gap-1.5 rounded-lg border border-red-300/30 bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Delete Button
  </button>
</div>


<!-- Buttons with icons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
   Neutral Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-blue-400/30 bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
    Colored Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
    Secondary Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-red-300/30 bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
    Delete Button
  </button>
</div>

<!-- Icon buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-blue-400/30 bg-blue-600 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-red-300/30 bg-red-600 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
  </button>
</div>

<!-- Small icon buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 p-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-blue-400/30 bg-blue-600 p-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 p-2 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-red-300/30 bg-red-600 p-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
  </button>
</div>

Fancy buttons

Fancy buttons, with slight skeumorphism and hover effects.

<!-- Simple buttons -->
<div class="flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-neutral-900 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    Neutral Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Colored Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-white px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    Secondary Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Delete Button
  </button>
</div>

<!-- Small Simple buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-neutral-900 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    Small Neutral Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-blue-600 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Small Colored Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-white px-3 py-2 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    Small Secondary Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-red-600 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Small Delete Button
  </button>
</div>

<!-- Disabled buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" disabled class="relative flex items-center justify-center gap-1.5 rounded-lg bg-neutral-900 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    Neutral Button
  </button>

  <button type="button" disabled class="relative flex items-center justify-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Colored Button
  </button>

  <button type="button" disabled class="relative flex items-center justify-center gap-1.5 rounded-lg bg-white px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    Secondary Button
  </button>

  <button type="button" disabled class="relative flex items-center justify-center gap-1.5 rounded-lg bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Delete Button
  </button>
</div>

<!-- Buttons with icons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-neutral-900 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
    Neutral Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
    Colored Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-white px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
    Secondary Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
    Delete Button
  </button>
</div>

<!-- Icon buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-neutral-900 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-blue-600 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-white p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-red-600 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
  </button>
</div>

<!-- Small Icon buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-neutral-900 p-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-blue-600 p-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-white p-2 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg bg-red-600 p-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
  </button>
</div>

Basic pill buttons

Basic buttons with hover effects & rounded corners.

<!-- Simple buttons -->
<div class="flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    Neutral Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-blue-400/30 bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Colored Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    Secondary Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-red-300/30 bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Delete Button
  </button>
</div>

<!-- Small Simple buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-400/30 bg-neutral-800 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    Small Neutral Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-blue-400/30 bg-blue-600 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed dark:focus-visible:outline-neutral-200">
    Small Colored Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-200 bg-white/90 px-3 py-2 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    Small Secondary Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-red-300/30 bg-red-600 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed dark:focus-visible:outline-neutral-200">
    Small Delete Button
  </button>
</div>

<!-- Disabled buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" disabled class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    Neutral Button
  </button>

  <button type="button" disabled class="flex items-center justify-center gap-1.5 rounded-full border border-blue-400/30 bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Colored Button
  </button>

  <button type="button" disabled class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    Secondary Button
  </button>

  <button type="button" disabled class="flex items-center justify-center gap-1.5 rounded-full border border-red-300/30 bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Delete Button
  </button>
</div>


<!-- Buttons with icons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
    Neutral Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-blue-400/30 bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
    Colored Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
    Secondary Button
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-red-300/30 bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
    Delete Button
  </button>
</div>

<!-- Icon buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-400/30 bg-neutral-800 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-blue-400/30 bg-blue-600 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-200 bg-white/90 p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-red-300/30 bg-red-600 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
  </button>
</div>

<!-- Small icon buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-400/30 bg-neutral-800 p-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-blue-400/30 bg-blue-600 p-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-blue-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-neutral-200 bg-white/90 p-2 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full border border-red-300/30 bg-red-600 p-2 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-red-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
  </button>
</div>

Fancy pill buttons

Fancy buttons, with slight skeumorphism, hover effects & rounded corners.

<!-- Simple buttons -->
<div class="flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-neutral-900 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    Neutral Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Colored Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-white px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    Secondary Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Delete Button
  </button>
</div>

<!-- Small Simple buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-neutral-900 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    Small Neutral Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-blue-600 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed dark:focus-visible:outline-neutral-200">
    Small Colored Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-white px-3 py-2 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    Small Secondary Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-red-600 px-3 py-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed dark:focus-visible:outline-neutral-200">
    Small Delete Button
  </button>
</div>

<!-- Disabled buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" disabled class="relative flex items-center justify-center gap-1.5 rounded-full bg-neutral-900 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    Neutral Button
  </button>

  <button type="button" disabled class="relative flex items-center justify-center gap-1.5 rounded-full bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Colored Button
  </button>

  <button type="button" disabled class="relative flex items-center justify-center gap-1.5 rounded-full bg-white px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    Secondary Button
  </button>

  <button type="button" disabled class="relative flex items-center justify-center gap-1.5 rounded-full bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    Delete Button
  </button>
</div>

<!-- Buttons with icons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-neutral-900 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
    Neutral Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-blue-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
    Colored Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-white px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
    Secondary Button
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-red-600 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
    Delete Button
  </button>
</div>

<!-- Icon buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-neutral-900 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-blue-600 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-white p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-red-600 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
  </button>
</div>

<!-- Small Icon buttons -->
<div class="mt-8 flex justify-center gap-2 flex-wrap max-w-sm">
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-neutral-900 p-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.15),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-800 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,14,14,0.2),0_0_0_1px_rgba(29,29,29,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(229,229,229,1),inset_0_1px_0_0_rgba(255,255,255,0.8)] dark:hover:bg-white dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.2),0_2px_4px_0_rgba(0,0,0,0.1),0_0_0_1px_rgba(255,255,255,1),inset_0_1px_0_0_rgba(255,255,255,0.9)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-blue-600 p-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-blue-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(28,111,245,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-white p-2 text-xs font-medium whitespace-nowrap text-neutral-800 shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.06),0_0_0_1px_rgba(0,0,0,0.1),inset_0_1px_0_0_rgba(255,255,255,0.8),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/15 before:to-white/5 dark:before:from-white/10 dark:before:to-white/5 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-neutral-50 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.08),0_2px_4px_0_rgba(0,0,0,0.08),0_0_0_1px_rgba(0,0,0,0.12),inset_0_1px_0_0_rgba(255,255,255,0.9),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-950 dark:text-neutral-100 dark:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(48,48,48,1),inset_0_1px_0_0_rgba(255,255,255,0.17),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:hover:bg-neutral-900 dark:hover:shadow-[0_4px_12px_0_rgba(0,0,0,0.45),0_2px_4px_0_rgba(0,0,0,0.3),0_0_0_1px_rgba(58,58,58,1),inset_0_1px_0_0_rgba(255,255,255,0.20),inset_0_0_0_1px_rgba(255,255,255,0.03)] dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M9,1C4.589,1,1,4.589,1,9c0,1.396,.371,2.776,1.062,3.971,.238,.446-.095,2.002-.842,2.749-.209,.209-.276,.522-.17,.798,.106,.276,.365,.465,.66,.481,.079,.004,.16,.006,.241,.006,1.145,0,2.535-.407,3.44-.871,.675,.343,1.39,.587,2.131,.728,.484,.092,.982,.138,1.478,.138,4.411,0,8-3.589,8-8S13.411,1,9,1Zm-3.5,9c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Zm3.5,0c-.552,0-1-.449-1-1s.448-1,1-1,1,.449,1,1-.448,1-1,1Z" fill="currentColor"></path></g></svg>
  </button>

  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-full bg-red-600 p-2 text-xs font-medium whitespace-nowrap text-white shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] transition-all duration-200 ease-out select-none before:pointer-events-none before:absolute before:inset-0 before:z-10 before:rounded-[inherit] before:bg-gradient-to-b before:from-white/25 before:via-white/5 before:to-transparent dark:before:from-white/20 before:p-px before:[mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)] hover:bg-red-500 hover:shadow-[0_4px_12px_0_rgba(29,29,29,0.15),0_2px_4px_0_rgba(14,18,27,0.2),0_0_0_1px_rgba(235,45,70,1),inset_0_1px_0_0_rgba(255,255,255,0.25),inset_0_0_0_1px_rgba(255,255,255,0.03)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M15.25,3.5h-3.25v-.75c0-.965-.785-1.75-1.75-1.75h-2.5c-.965,0-1.75,.785-1.75,1.75v.75H2.75c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75H15.25c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-7.75-.75c0-.138,.112-.25,.25-.25h2.5c.138,0,.25,.112,.25,.25v.75h-3v-.75Z"></path><path d="M13.5,6H4.5c-.206,0-.402,.084-.544,.234s-.216,.35-.205,.556l.4,7.604c.077,1.461,1.283,2.606,2.746,2.606h4.205c1.463,0,2.669-1.145,2.746-2.605l.4-7.605c.011-.206-.063-.406-.205-.556s-.338-.234-.544-.234Z" fill="currentColor"></path></g></svg>
  </button>
</div>

Other Buttons

Ghost buttons

Ghost buttons are usually used for secondary actions.

<div class="flex justify-center gap-2 flex-wrap max-w-sm">
  <!-- Normal Ghost Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg bg-transparent px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    Ghost Button
  </button>

  <!-- Rounded Ghost Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full bg-transparent px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    Rounded Ghost Button
  </button>
</div>

<div class="mt-4 flex justify-center gap-2 flex-wrap max-w-sm">
  <!-- Small Normal Ghost Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg bg-transparent px-3 py-2 text-xs font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    Small Ghost Button
  </button>

  <!-- Small Rounded Ghost Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full bg-transparent px-3 py-2 text-xs font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    Small Rounded Ghost Button
  </button>
</div>

<div class="mt-4 flex justify-center gap-2 flex-wrap max-w-sm">
  <!-- Disabled Ghost Button -->
  <button type="button" disabled class="flex items-center justify-center gap-1.5 rounded-lg bg-transparent px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    Ghost Button
  </button>

  <!-- Disabled Rounded Ghost Button -->
  <button type="button" disabled class="flex items-center justify-center gap-1.5 rounded-full bg-transparent px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    Rounded Ghost Button
  </button>
</div>

<div class="mt-4 flex justify-center gap-2 flex-wrap max-w-sm">
  <!-- Ghost Button with Icon -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg bg-transparent px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    Ghost Button
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M9,15.5c-.414,0-.75-.336-.75-.75V3.25c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V14.75c0,.414-.336,.75-.75,.75Z" fill="currentColor"></path></g></svg>
  </button>

  <!-- Rounded Ghost Button with Icon -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full bg-transparent px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    Rounded Ghost Button
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M9,15.5c-.414,0-.75-.336-.75-.75V3.25c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V14.75c0,.414-.336,.75-.75,.75Z" fill="currentColor"></path></g></svg>
  </button>
</div>

<div class="mt-4 flex justify-center gap-2 flex-wrap max-w-sm">
  <!-- Ghost Button with Icon -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg bg-transparent p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M9,15.5c-.414,0-.75-.336-.75-.75V3.25c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V14.75c0,.414-.336,.75-.75,.75Z" fill="currentColor"></path></g></svg>
  </button>

  <!-- Rounded Ghost Button with Icon -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full bg-transparent p-2.5 text-xs font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M9,15.5c-.414,0-.75-.336-.75-.75V3.25c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V14.75c0,.414-.336,.75-.75,.75Z" fill="currentColor"></path></g></svg>
  </button>
</div>

<div class="mt-4 flex justify-center gap-2 flex-wrap max-w-sm">
  <!-- Small Ghost Button with Icon -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg bg-transparent p-2 text-xs font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M9,15.5c-.414,0-.75-.336-.75-.75V3.25c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V14.75c0,.414-.336,.75-.75,.75Z" fill="currentColor"></path></g></svg>
  </button>

  <!-- Small Rounded Ghost Button with Icon -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-full bg-transparent p-2 text-xs font-medium whitespace-nowrap text-neutral-800 transition-all duration-100 ease-in-out select-none hover:bg-neutral-100 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:text-neutral-50 dark:hover:bg-neutral-600/50 dark:hover:text-white dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M14.75,9.75H3.25c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75H14.75c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75Z"></path><path d="M9,15.5c-.414,0-.75-.336-.75-.75V3.25c0-.414,.336-.75,.75-.75s.75,.336,.75,.75V14.75c0,.414-.336,.75-.75,.75Z" fill="currentColor"></path></g></svg>
  </button>
</div>

Button with animated arrow

A button with a right arrow that animates on hover.

<button type="button" class="group flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
  Get Started
  <svg xmlns="http://www.w3.org/2000/svg" class="size-3 sm:size-3.5 transition-transform group-hover:translate-x-0.5" width="18" height="18" viewBox="0 0 18 18"><g fill="currentColor"><path d="M13.28,8.47L7.03,2.22c-.293-.293-.768-.293-1.061,0s-.293,.768,0,1.061l5.72,5.72-5.72,5.72c-.293,.293-.293,.768,0,1.061,.146,.146,.338,.22,.53,.22s.384-.073,.53-.22l6.25-6.25c.293-.293,.293-.768,0-1.061Z" fill="currentColor" class="nc-icon-wrapper"></path></g></svg>
</button>

Loading button

A disabled button showing loading state with spinner.

<button type="button" disabled class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
  <svg class="animate-spin size-3.5 sm:size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  Loading...
</button>

Button with keyboard shortcut

A button displaying a keyboard shortcut depending on the OS. Note that the shortcut is not functional in this example.

<button class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
  <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
  </svg>
  <span class="text-sm pr-4">Search...</span>
  <span class="ml-auto text-xs text-neutral-500 dark:text-neutral-400 bg-white dark:bg-neutral-700 rounded border border-neutral-200 dark:border-neutral-600 px-1">
    <span class="mac-only hidden">⌘K</span>
    <span class="non-mac">Ctrl+K</span>
  </span>
</button>

<script>
  // Check platform once when the page loads
  if (navigator.platform.includes('Mac')) {
    document.querySelectorAll('.mac-only').forEach(el => el.classList.remove('hidden'));
    document.querySelectorAll('.non-mac').forEach(el => el.classList.add('hidden'));
  }
</script>

Notification buttons

A notification button with badge indicator.

<div class="flex justify-center gap-2 flex-wrap max-w-sm">
  <!-- Notification Button -->
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    Notification Button
    <!-- Notification Badge -->
    <span class="absolute -top-1 -right-1 flex h-3 w-3">
      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
      <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
    </span>
  </button>

  <!-- Notification Icon only -->
  <button type="button" class="relative flex items-center justify-center gap-1.5 rounded-lg border border-neutral-400/30 bg-neutral-800 p-2.5 text-xs font-medium whitespace-nowrap text-white shadow-sm transition-all duration-100 ease-in-out select-none hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-white dark:text-neutral-800 dark:hover:bg-neutral-100 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-5" width="20" height="20" viewBox="0 0 20 20">
      <g fill="currentColor">
        <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"/>
      </g>
    </svg>
    <!-- Notification Badge -->
    <span class="absolute -top-1 -right-1 flex h-3 w-3">
      <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
      <span class="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
    </span>
  </button>
</div>

Social media login buttons with brand colors.

<div class="flex justify-center gap-2 flex-col max-w-sm">
  <!-- Google Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg class="size-3.5 sm:size-4" viewBox="0 0 24 24">
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
      <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
    </svg>
    Continue with Google
  </button>

  <!-- GitHub Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg class="size-3.5 sm:size-4" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
    </svg>
    Continue with GitHub
  </button>

  <!-- Facebook Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg class="size-3.5 sm:size-4" fill="#1877F2" viewBox="0 0 24 24">
      <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
    </svg>
    Continue with Facebook
  </button>

  <!-- Twitter/X Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg class="size-3.5 sm:size-4" fill="currentColor" viewBox="0 0 24 24">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
    </svg>
    Continue with X
  </button>

  <!-- Apple Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 sm:size-4" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.3091 6.48971C13.8886 6.26249 14.614 6.00143 15.6913 6.00143C17.3749 6.00143 19.1523 6.89003 20.3404 8.35613L21.0976 9.29055L20.0406 9.86449C17.5093 11.2391 17.8608 14.8633 20.4912 15.8476L21.4953 16.2234L21.0506 17.199C20.5752 18.2418 20.3284 18.7499 19.6885 19.7119C18.7074 21.192 17.3565 22.9787 15.3958 22.997C14.1793 23.0084 13.2116 22.1656 12.0053 22.172C10.7909 22.1784 9.80329 23 8.57946 22.9999L8.57073 22.9999C6.64549 22.9829 5.31146 21.3315 4.3393 19.8664C1.80437 16.0461 1.46451 11.568 3.19812 8.92508C4.43251 7.04322 6.3164 6.00413 8.20878 6.00413C9.15354 6.00413 9.91949 6.26847 10.5172 6.47873C11.1502 6.70144 11.5462 6.84 11.9823 6.84C12.4376 6.84 12.7407 6.71256 13.3091 6.48971Z" fill="currentColor"></path> <path d="M15.3653 3.793C16.0815 2.87425 16.5703 1.63176 16.373 0.305766C15.203 0.386016 13.89 1.07576 13.0913 2.0455C12.3668 2.92525 11.7675 4.231 12 5.5C13.2765 5.53975 14.598 4.77775 15.3653 3.793Z" fill="currentColor"></path></g></svg>
    Continue with Apple
  </button>

  <!-- Microsoft Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg class="size-3.5 sm:size-4" viewBox="0 0 24 24">
      <path fill="#F25022" d="M1 1h10v10H1z"/>
      <path fill="#00A4EF" d="M13 1h10v10H13z"/>
      <path fill="#7FBA00" d="M1 13h10v10H1z"/>
      <path fill="#FFB900" d="M13 13h10v10H13z"/>
    </svg>
    Continue with Microsoft
  </button>

  <!-- Discord Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg class="size-3.5 sm:size-4" fill="#5865F2" viewBox="0 0 24 24">
      <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0189 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1568 2.4189Z"/>
    </svg>
    Continue with Discord
  </button>

  <!-- LinkedIn Button -->
  <button type="button" class="flex items-center justify-center gap-1.5 rounded-lg border border-neutral-200 bg-white/90 px-3.5 py-2 text-sm font-medium whitespace-nowrap text-neutral-800 shadow-xs transition-all duration-100 ease-in-out select-none hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700 dark:bg-neutral-800/50 dark:text-neutral-50 dark:hover:bg-neutral-700/50 dark:focus-visible:outline-neutral-200">
    <svg class="size-3.5 sm:size-4" fill="#0A66C2" viewBox="0 0 24 24">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
    </svg>
    Continue with LinkedIn
  </button>
</div>

Animated Number

Clipboard