Dokümanlar/Feedback

Alert

Semantik önem derecesine sahip satır içi bağlamsal geri bildirim.

Alert.tsx

Taslak Değişiklikler Kaydedilmedi

Sayfadan ayrılmadan önce yaptığınız mimari değişiklikleri buluta senkronize edin.

Yeni Sürüm Yayında (v2.4.0)

Tüm tasarım tokenları ve Next.js derleme önbellekleri başarıyla güncellendi.

IFC Modeli Ayrıştırma Hatası

Yüklenen dosya şema doğrulamadan geçemedi (Geçersiz GUID referansı tespit edildi).

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/alert.json

Kullanım Örneği

import { Alert } from "@/components/feedback/Alert"

<Alert
  variant="warning"
  title="Dağıtım bekliyor"
  dismissible
  action={<Button size="sm">Ayrıntıları aç</Button>}
>
  Production onayı tamamlanmadı.
</Alert>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
variant	"info" \| "success" \| "warning" \| "error" \| "sage" \| "neutral"	"info"	Görsel renkleri ve varsayılan duyuru rolünü belirler.
title	ReactNode	—	Bildirim başlığı.
children	ReactNode	—	aria-describedby ile bağlanan bildirim içeriği.
icon	ReactNode	—	Varsayılan varyant ikonunu değiştiren özel ikon; null ile gizlenebilir.
action	ReactNode	—	Mobilde sarılabilen, etiketli aksiyon grubu.
dismissible	boolean	false	Kapatma düğmesini gösterir.
dismissed	boolean	—	Kontrollü gizlenme durumu.
defaultDismissed	boolean	false	Kontrolsüz kullanımın ilk gizlenme durumu.
onDismiss	() => void	—	Kapatma istendiğinde çağrılır.
borderAccent	boolean	false	Sol tarafta varyant renkli vurgu çizgisi gösterir.
size	"sm" \| "md" \| "lg"	"md"	İç boşluk, metin ve ikon ölçeği.
headingLevel	2 \| 3 \| 4 \| 5 \| 6	3	Başlığın belge hiyerarşisindeki seviyesi.
dismissLabel	string	"Bildirimi kapat"	Kapatma düğmesinin erişilebilir etiketi.
actionsLabel	string	"Bildirim aksiyonları"	Aksiyon grubunun erişilebilir etiketi.