ComponentsButton Group
Hello Yumma UI! 🎉

Button Group

Organizes multiple buttons together with consistent spacing and layout.

Basic Button Group

<div class="d-f">
   <button class="px-4 py-2 rad-l-1 fs-sm fw-500 bg-white tc-slate b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Left</button>
   <button class="px-4 py-2 fs-sm fw-500 bg-white tc-slate b-1 bl-0 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Center</button>
   <button class="px-4 py-2 rad-r-1 fs-sm fw-500 bg-white tc-slate b-1 bl-0 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Right</button>
</div>

Icons

<div class="d-f">
   <button class="d-f ai-c jc-c px-3 py-2 rad-l-1 fs-sm fw-500 bg-white tc-slate b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 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="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>
   </button>
   <button class="d-f ai-c jc-c px-3 py-2 fs-sm fw-500 bg-white tc-slate b-1 bl-0 bc-silver-4 h:bg-silver-1 f:oc-silver-1 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
   </button>
   <button class="d-f ai-c jc-c px-3 py-2 rad-r-1 fs-sm fw-500 bg-white tc-slate b-1 bl-0 bc-silver-4 h:bg-silver-1 f:oc-silver-1 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="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
   </button>
</div>

Active State

<div class="d-f">
   <button class="px-4 py-2 rad-l-1 fs-sm fw-500 bg-slate-8 tc-white b-1 bc-slate-8 f:oc-silver-4 f:os-s f:ow-2">Day</button>
   <button class="px-4 py-2 fs-sm fw-500 bg-white tc-slate b-1 bl-0 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Week</button>
   <button class="px-4 py-2 rad-r-1 fs-sm fw-500 bg-white tc-slate b-1 bl-0 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Month</button>
</div>