Design system v1.0
Komponens-galéria
A `@butters/ui` csomag élő bemutatója. Mobile-first nézet — kicsinyítsd 390px-re és próbáld ki.
Színek
Tailwind tokenek
bg#000000
surface-1#0e0e0e
surface-2#1a1a1a
surface-3#242424
border#2e2e2e
accent-500#FFD60A
success#30D158
warning#FF9F0A
danger#FF453A
info#0A84FF
Tipográfia
Inter, skála 12 / 14 / 16 / 24 / 32 / 48 / 60
- BUTTERSHero 60 / black
- BUTTERSHero 48 / black
- BUTTERSTitle 32 / bold
- BUTTERSSection 24 / semibold
- BUTTERSBody 16 / medium
- BUTTERSSmall 14
- BUTTERSCaption 12
Gombok
Primary fehér / fekete · Secondary · Ghost · Destructive
Pill-ek (szűrő)
Aktív: fehér / fekete
Badge-ek
ÚjAktívVárakozikLejártInfoInaktív
Pénz-megjelenítés
Bruttó + nettó együtt
12 990 Ftnettó 10 228 Ft
245 500 Ftnettó 193 307 Ft
2 345 678 Ft — inline formázás
Dátum-választó
Saját komponens, magyar locale
Tárolt ISO: —
Modálok
X + backdrop + ESC mindhárom kötelező
Kártya minták
Mai forgalom
187 400 Ft
52 rendelés · +12% tegnaphoz
3 értesítés
Készlet, beszerzés, HACCP
PWA telepítés
Home screen ikon + standalone app mód
Telefonon nyitva meg a gombot megnyomva home screen-re telepíthető. iOS-en instrukciós lépéseket mutatunk, Androidon a böngésző natív install promptja jelenik meg.
Bottom tab nav
Az oldal alján rögzítve
A nav globálisan be van kapcsolva ezen az oldalon. Görgess le a megtekintéshez.