← KDS Design System

Button atom

The KDS button — base .btn + size (--34 / --40 / --32) + variant (--grad / --slate / --success / --danger). min-width 96 · Mazzard · colours from KDS tokens. Composed by the Header (gradient) and Order card (slate/success/danger). Reuse — never rebuild.

Primary (gradient) — used in the Header

.btn .btn--34 .btn--grad · 34h · r6 · gradient 71.86° · 12/700 · min-width 96

text

icon + text (Inter)

Variants & sizes

slate / success / danger map to text-300 · green-500 · red-500

--40 --success

--40 --slate

--32 --slate (play)

--32 --success

--32 --danger