ComponentsButton
Hello Yumma UI! 🎉

Button

Enables user interactions through clickable elements.

Primary

<button class="g-2 px-3 py-2 rad-1 fs-md fw-500 bg-slate-8 tc-white h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">Sign in</button>

Outline

<button class="g-2 px-3 py-2 rad-1 fs-md fw-500 bg-white tc-slate-8 b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Sign in</button>

Ghost

<button class="g-2 px-3 py-2 rad-1 fs-md fw-500 bg-transparent tc-slate-8 h:bg-silver-1">Sign in</button>

Pill

<button class="g-2 px-3 py-2 rad-9 fs-sm fw-500 bg-slate-8 tc-white f:oc-silver-4 f:os-s f:ow-2">Sign in</button>

Disabled

<button disabled class="g-2 px-3 py-2 rad-1 fs-md fw-500 bg-slate-8 tc-white f:oc-silver-4 f:os-s f:ow-2">Update</button>

Destructive

<button class="g-2 px-3 py-2 rad-1 fs-md fw-500 bg-red tc-white h:bg-red-7 f:oc-red-2 f:os-s f:ow-2">Remove</button>

Colorful Icons

<div class="d-g gtc-1 sm:gtc-4 md:gtc-7 g-3">
   <button class="ai-c d-f jc-c g-2 d-10 rad-9 fs-md fw-500 bg-red tc-white f:oc-red-4 f:os-s f:ow-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
   </button>
   <button class="ai-c d-f jc-c g-2 d-10 rad-9 fs-md fw-500 bg-orange tc-white f:oc-orange-4 f:os-s f:ow-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
   </button>
   <button class="ai-c d-f jc-c g-2 d-10 rad-9 fs-md fw-500 bg-yellow tc-white f:oc-yellow-4 f:os-s f:ow-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
   </button>
   <button class="ai-c d-f jc-c g-2 d-10 rad-9 fs-md fw-500 bg-green tc-white f:oc-green-4 f:os-s f:ow-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
   </button>
   <button class="ai-c d-f jc-c g-2 d-10 rad-9 fs-md fw-500 bg-blue tc-white f:oc-blue-4 f:os-s f:ow-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
   </button>
   <button class="ai-c d-f jc-c g-2 d-10 rad-9 fs-md fw-500 bg-indigo tc-white f:oc-indigo-4 f:os-s f:ow-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
   </button>
   <button class="ai-c d-f jc-c g-2 d-10 rad-9 fs-md fw-500 bg-violet tc-white f:oc-violet-4 f:os-s f:ow-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
   </button>
</div>

Icon and Label

<button className="ai-c d-f jc-c g-2 px-3 py-2 rad-1 fs-sm fw-500 bg-slate-8 tc-white f:oc-silver-4 f:os-s f:ow-2">
   <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v13"/><path d="m16 6-4-4-4 4"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/></svg>
   <span>Share</span>
</button>