Primary Button
Ana sayfa eylemleri için yüksek vurgulu buton.
Component Library
Hazır bileşenler
İhtiyacınız olan bileşeni seçin, canlı örneğini inceleyin ve kodunu kopyalayın.
Aramanızla eşleşen component bulunamadı.
Butonlar
Eylemler, formlar ve navigasyon için.
Secondary Button
İkincil ve daha düşük öncelikli eylemler için.
Icon Button
Araç çubukları ve kompakt eylemler için ikon butonu.
Dropdown menüler
Seçim ve bağlamsal eylemler için.
Select
Formlarda tek bir değer seçmek için standart menü.
Action Menu
Bir kayda ait ikincil işlemleri tek menüde toplar.
⌕⌄
Searchable Select
Uzun listelerde yazarak hızlı seçim yapılmasını sağlar.
Checkbox’lar
Tercihler ve çoklu seçimler için.
Checkbox
Bağımsız bir tercihi açıp kapatmak için.
Checkbox Group
Birden fazla seçeneğin birlikte yönetilmesi için.
Switch
Anında uygulanan açık veya kapalı durumları için.
Form alanları
Veri girişi ve doğrulama akışları için.
Text Input
Etiket, açıklama ve odak durumuyla temel veri girişi.
Password Input
Hassas değerleri görünür yapma kontrolüyle gösterir.
Textarea
Uzun metinler için sayaç destekli çok satırlı alan.
Durum göstergeleri
Durum, kimlik ve ilerleme bilgisini özetler.
AktifBetaHata
Status Badges
Sistem durumlarını kısa ve taranabilir etiketlerle gösterir.
AY
Ahmet YılmazPro paket
Avatar
Görsel olmadığında baş harflerden güvenli fallback üretir.
Aylık kullanım126.400 / 200.000
%63 kullanıldı
Progress Bar
Kota veya tamamlanma oranını metinle birlikte sunar.
Geri bildirim
Başarı, hata ve bekleme durumları için.
✓
API anahtarı oluşturuldu
Gizli anahtarı güvenli bir yerde saklayın.
Alert
Kalıcı ve bağlamsal geri bildirim mesajları için.
✓
KopyalandıKod panoya eklendi.
Toast
İşlem sonucunu akışı kesmeden geçici olarak bildirir.
Skeleton
İçerik yüklenirken düzen kaymasını azaltan placeholder.
Navigasyon
Sayfa ve görünüm geçişleri için.
Genel hesap ayarları
Tabs
Aynı bağlam içindeki görünümler arasında geçiş sağlar.
Pagination
Uzun veri listelerinde sayfalar arasında geçiş sağlar.
Breadcrumb
Hiyerarşik konumu ve üst seviyelere dönüşü gösterir.
Overlay & veri
Yoğun bilgi ve odak gerektiren eylemler için.
API anahtarını iptal et?
Bu işlem geri alınamaz.
Alert Dialog
Geri alınamaz işlemler için açık onay talep eder.
API anahtarları yalnız bir kez gösterilir.
Tooltip
Kısa yardımcı bilgiyi hover ve klavye odağında gösterir.
| Anahtar | Durum |
|---|---|
| Production | Aktif |
| Staging | Test |
Data Table
Yoğun verileri hizalı, taranabilir satırlar halinde gösterir.