Components · Modal

Modal patterns

Sekiz modal varyantı — confirm dialog'tan command palette'e, bottom sheet'ten drawer'a. Hepsi aynı backdrop + shadow + radius scale'ini paylaşır; emerald primary CTA, gray neutrals.

01 · Basic confirm

İki butonlu standart onay — destruct olmayan aksiyonlar için (kaydet, gönder)

Değişiklikleri kaydet?

Menü güncellemen 3 ürünü etkileyecek ve WhatsApp botuna anında yansıyacak.

02 · Destructive confirm

Geri alınamaz aksiyonlar — silme, iptal, sıfırlama (kırmızı status icon + danger CTA)

Müşteriyi sil

Ahmet Yılmaz ve geçmişe ait 47 sipariş kaydı kalıcı olarak silinecek. Bu işlem geri alınamaz.

03 · Form modal

Yeni kayıt oluşturma — ürün, müşteri, kurye eklemek

Yeni ürün ekle

Menüye eklenen ürünler WhatsApp botuna 30 saniye içinde yansır.

Bu metin müşteriye WhatsApp menüsünde görünür.
3 / 3 alan dolduruldu

04 · Success / Hero

Onboarding bitiş, abonelik açıldı, entegrasyon tamamlandı — gradient hero ile

WhatsApp bağlantısı kuruldu

Lezzet Köşesi artık +90 532 555 12 34 üzerinden mesaj alıp yanıtlıyor. İlk siparişi göstermek için bota "menü" yazabilirsin.

05 · Warning notice

Bilgilendirici uyarı — limit aşıldı, oturum sona eriyor, plan limiti

Aylık mesaj limitine yaklaştın

Başlangıç planındasın — bu ay 847 / 1.000 mesaj kullanıldı. Limite takılmamak için planını yükseltmeyi düşünebilirsin.

06 · Drawer (right slide-over)

Detay düzenleme — siparişe not ekle, müşteri adresi düzenle

Sipariş #4721 detayı

Ahmet Yılmaz · 14:32 · 3 ürün

Margerita Pizza · 2x 370,00 TL
Coca Cola 1L 45,00 TL
Tatlı (gün) 60,00 TL
Toplam 475,00 TL

07 · Bottom sheet

Mobilde kontekst menü — paylaş, taşı, dışa aktar gibi hızlı seçimler

Sipariş #4721

Bir aksiyon seçin

08 · Command palette

Klavye kısayolu (⌘K) — hızlı navigasyon, eylem arama, ürün/müşteri bul
esc
Sonuçlar
Sipariş Panosu'na git
G O
Yeni sipariş oluştur
⌘ N
Sipariş #4721'i aç
son
Müşteri
Ahmet Yılmaz · 12 sipariş
VIP
↑↓ gez ↵ seç esc kapat

Yapı kuralları

· Backdrop: rgba(17, 24, 39, 0.55) — siyah değil, gray-900 üzerinde alpha. Hafif blur opsiyonel.
· Modal radius 12px, drawer 12px 0 0 12px, bottom sheet 16px 16px 0 0.
· Shadow: 0 25px 50px -12px rgba(0,0,0,0.35) + 0 0 0 1px rgba(0,0,0,0.05) hairline.
· Width scale: sm 400 · md 520 · lg 640 · xl 760. Drawer sabit 440, bottom sheet 380 mobil.
· Status icon header (success/warning/danger) — 44×44 daire + 22×22 icon, tone-50 background + tone-600 fg.
· Footer alignment: tek başına flex-end, sayaç/meta varsa between.
· Form modal'da between footer ile sol tarafta progress meta.
· Command palette her zaman dikey merkez yerine üst-orta (top: 18vh) konumlanır — gerçek kullanımda.
· Klavye: esc kapat, ⏎ primary action, tab trap. Focus modal açılır açılmaz close button'a değil ilk anlamlı elemana (input varsa input'a).
· Animasyon: fade backdrop (150ms) + scale 0.96 → 1 modal (200ms cubic-bezier(0.16, 1, 0.3, 1)). Drawer/sheet için translate.