Buttons with icons

Inline

<div class="t1 flex flex-col flex-start-start @/+mt-8"> <button class="t1 u1.btn u1.btn-xs u1.btn-action"> <svg class="t1 u1.btn-icon-xs mr-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> Button XS </button> <button class="t1 u1.btn u1.btn-s u1.btn-action"> <svg class="t1 u1.btn-icon-s mr-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> Button S </button> <button class="t1 u1.btn u1.btn-m u1.btn-action"> <svg class="t1 u1.btn-icon-m mr-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> Button M </button> <button class="t1 u1.btn u1.btn-l u1.btn-action"> <svg class="t1 u1.btn-icon-l mr-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> Button L </button> <button class="t1 u1.btn u1.btn-xl u1.btn-action"> <svg class="t1 u1.btn-icon-xl mr-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> Button XL </button> </div>

<div class="t1 flex flex-col flex-start-start @/+mt-8"> <button class="t1 u1.btn u1.btn-xs u1.btn-action"> X-Small <svg class="t1 u1.btn-icon-xs ml-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button> <button class="t1 u1.btn u1.btn-s u1.btn-action"> Small <svg class="t1 u1.btn-icon-s ml-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button> <button class="t1 u1.btn u1.btn-m u1.btn-action"> Medium <svg class="t1 u1.btn-icon-m ml-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button> <button class="t1 u1.btn u1.btn-l u1.btn-action"> Large <svg class="t1 u1.btn-icon-l ml-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button> <button class="t1 u1.btn u1.btn-xl u1.btn-action"> X-Large <svg class="t1 u1.btn-icon-xl ml-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button> </div>

Block

<button class="t1 u1.btn u1.btn-m u1.btn-action w-full"> <svg class="t1 u1.btn-icon-m mr-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> Medium </button>

<button class="t1 u1.btn u1.btn-m u1.btn-action w-full"> Medium <svg class="t1 u1.btn-icon-m ml-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/></svg> </button>