ComponentsButton

Button

Enables user interactions through clickable elements.

Primary

<button class="g-2 px-3 py-2 rad-0 fs-md fw-600 lh-1 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-0 fs-md fw-600 lh-1 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-0 fs-md fw-600 lh-1 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-600 lh-1 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-0 fs-md fw-600 lh-1 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-0 fs-md fw-600 lh-1 bg-red tc-white h:bg-red-7 f:oc-red-2 f:os-s f:ow-2">Delete</button>

Icon and Label

<button class="ai-c d-f jc-c g-2 px-3 py-2 rad-0 fs-sm fw-600 lh-1 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 256 256"
>
<rect width="256" height="256" fill="none" />
<path
d="M176,104h24a8,8,0,0,1,8,8v96a8,8,0,0,1-8,8H56a8,8,0,0,1-8-8V112a8,8,0,0,1,8-8H80"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<polyline
points="88 64 128 24 168 64"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<line
x1="128"
y1="24"
x2="128"
y2="136"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
</svg>
<span>Share</span>
</button>