Buttons

<button class="t1 u1.btn u1.btn-m u1.btn-action">Button</button>

<button class="t1 u1.btn u1.btn-m u1.btn-action w-full">Full-width button</button>

Sizes

<div class="t1 flex flex-col flex-start-start @/+mt-8"> <button class="t1 u1.btn u1.btn-xs u1.btn-action">Button XS</button> <button class="t1 u1.btn u1.btn-s u1.btn-action">Button S</button> <button class="t1 u1.btn u1.btn-m u1.btn-action">Button M</button> <button class="t1 u1.btn u1.btn-l u1.btn-action">Button L</button> <button class="t1 u1.btn u1.btn-xl u1.btn-action">Button XL</button> </div>

Hierarchy & types

<div class="t1 flex flex-col flex-start-start @/+mt-8"> <button class="t1 u1.btn u1.btn-m u1.btn-action">btn-action</button> <button class="t1 u1.btn u1.btn-m u1.btn-neutral">btn-neutral</button> <button class="t1 u1.btn u1.btn-m u1.btn-danger">btn-danger</button> <button class="t1 u1.btn u1.btn-m u1.btn-action-2">btn-action-2</button> <button class="t1 u1.btn u1.btn-m u1.btn-neutral-2">btn-neutral-2</button> <button class="t1 u1.btn u1.btn-m u1.btn-danger-2">btn-danger-2</button> <button class="t1 u1.btn u1.btn-m u1.btn-action-3">btn-action-3</button> <button class="t1 u1.btn u1.btn-m u1.btn-neutral-3">btn-neutral-3</button> <button class="t1 u1.btn u1.btn-m u1.btn-danger-3">btn-danger-3</button> </div>

<div class="t1 flex flex-col flex-start-start @/+mt-8 bg-c-gray-850 p-16"> <button class="t1 u1.btn u1.btn-m u1.btn-dark-action">btn-action</button> <button class="t1 u1.btn u1.btn-m u1.btn-dark-neutral">btn-neutral</button> <button class="t1 u1.btn u1.btn-m u1.btn-dark-danger">btn-danger</button> <button class="t1 u1.btn u1.btn-m u1.btn-dark-action-2">btn-action-2</button> <button class="t1 u1.btn u1.btn-m u1.btn-dark-neutral-2">btn-neutral-2</button> <button class="t1 u1.btn u1.btn-m u1.btn-dark-danger-2">btn-danger-2</button> <button class="t1 u1.btn u1.btn-m u1.btn-dark-action-3">btn-action-3</button> <button class="t1 u1.btn u1.btn-m u1.btn-dark-neutral-3">btn-neutral-3</button> <button class="t1 u1.btn u1.btn-m u1.btn-dark-danger-3">btn-danger-3</button> </div>

<div class="t1 flex flex-col flex-start-start @/+mt-8"> <a class="t1 u1.btn u1.btn-m u1.btn-action" href="#">Anchor</a> <button class="t1 u1.btn u1.btn-m u1.btn-action" >Button</button> <input class="t1 u1.btn u1.btn-m u1.btn-action" type="button" value="Input button"> <input class="t1 u1.btn u1.btn-m u1.btn-action" type="submit" value="Input submit"> <input class="t1 u1.btn u1.btn-m u1.btn-action" type="reset" value="Input reset"> </div>

<div class="t1 max-w-400"> <a class="t1 u1.btn u1.btn-m u1.btn-action w-full mb-8" href="#">Anchor</a> <button class="t1 u1.btn u1.btn-m u1.btn-action w-full mb-8" >Button</button> <input class="t1 u1.btn u1.btn-m u1.btn-action w-full mb-8" type="button" value="Input button"> <input class="t1 u1.btn u1.btn-m u1.btn-action w-full mb-8" type="submit" value="Input submit"> <input class="t1 u1.btn u1.btn-m u1.btn-action w-full" type="reset" value="Input reset"> </div>