Toast

Ekranın köşesinde üst üste dizilen, akışı engellemeyen kısa bildirimler.

import { Button, ToastProvider, useToast } from "@merid/react";

function SaveButton() {
  const { toast } = useToast();
  return (
    <Button
      onClick={() =>
        toast({ title: "Değişiklikler kaydedildi", description: "Çalışma alanı ayarların güncel.", tone: "success" })
      }
    >
      Değişiklikleri kaydet
    </Button>
  );
}

export function App() {
  return (
    <ToastProvider label="Bildirimler">
      <SaveButton />
    </ToastProvider>
  );
}

Import

tsx

import { ToastProvider, useToast } from "@merid/react";

Anatomi

Toast'lar imperative çalışır. Uygulamayı bir kez ToastProvider ile sar, sonra altındaki herhangi bir yerden useToast ile gelen toast()'u çağır.

tsx

<ToastProvider>
  <App /> {/* const { toast, dismiss } = useToast(); */}
</ToastProvider>

Her toast bir durum noktası, bir başlık, isteğe bağlı bir açıklama, isteğe bağlı bir aksiyon butonu ve bir kapatma butonu render'lar. Provider, etiketli bir bölgeyi ve içindeki polite live listeyi portal ile viewport'un sağ alt köşesine yerleştirir.

Örnekler

Tonlar

Ton yalnızca durum noktasının rengini değiştirir.

toast({ title: "neutral tonunda bir toast", tone: "neutral" });
toast({ title: "info tonunda bir toast", tone: "info" });
toast({ title: "success tonunda bir toast", tone: "success" });
toast({ title: "warning tonunda bir toast", tone: "warning" });
toast({ title: "danger tonunda bir toast", tone: "danger" });

Aksiyon, kalıcılık ve kapatma

duration: Infinity toast'u kapatılana kadar ekranda tutar. Aksiyonu seçmek onClick'i çalıştırır ve toast'u kapatır. Aynı id'yi yeniden kullanmak, yeni bir toast eklemek yerine mevcut olanı değiştirir.

const { toast, dismiss } = useToast();

toast({
  id: "archive", // aynı id'yi kullanmak mevcut toast'u değiştirir
  title: "Proje arşivlendi",
  duration: Infinity, // kapatılana kadar kalır
  action: { label: "Geri al", onClick: () => toast({ title: "Proje geri yüklendi", tone: "success" }) },
});

dismiss(); // tüm toast'ları kaldırır

API referansı

ToastProvider

Prop	Tip	Varsayılan	Açıklama
`children`	`ReactNode`	–	Uygulama içeriği.
`duration`	`number`	`5000`	Varsayılan otomatik kapanma süresi, ms cinsinden.
`limit`	`number`	`3`	Aynı anda görünen en fazla toast sayısı; en eskiler düşürülür.
`label`	`string`	`"Notifications"`	Bildirim bölgesinin erişilebilir adı. Türkçe arayüzde Türkçe bir değer ver, örneğin "Bildirimler".

useToast()

ToastApi döndürür. ToastProvider dışında çağrılırsa hata fırlatır.

Prop	Tip	Varsayılan	Açıklama
`toast`	`(options: ToastOptions) => string`	–	Bir toast gösterir ve id'sini döndürür.
`dismiss`	`(id?: string) => void`	–	Verilen id'deki toast'u kaldırır; id verilmezse tüm toast'ları kaldırır.

ToastOptions

Prop	Tip	Varsayılan	Açıklama
`title`Zorunlu	`ReactNode`	–	Kısa başlık.
`description`	`ReactNode`	–	İsteğe bağlı destekleyici metin.
`tone`	`"neutral" \| "info" \| "success" \| "warning" \| "danger"`	`"neutral"`	Durum noktasının rengi.
`duration`	`number`	`provider duration`	Bu kadar ms sonra otomatik kapanır; Infinity kapatılana kadar tutar.
`action`	`{ label: string; onClick: () => void }`	–	İsteğe bağlı aksiyon butonu.
`id`	`string`	–	Mevcut bir toast'u değiştirmek için aynı id'yi kullan; zamanlayıcısı yeni `duration` ile baştan başlar.

Stil verme

Sınıf	Eleman
`.mrd-toast-region`, `.mrd-toast-region__list`	Bölge ve live liste
`.mrd-toast`	Tek bir toast
`.mrd-toast__dot`	Durum noktası
`.mrd-toast__body`, `.mrd-toast__title`, `.mrd-toast__description`	Metin
`.mrd-toast__action`	Aksiyon butonu
`.mrd-toast__close`	Kapatma butonu

Attribute	Nerede	Değerler
`data-tone`	`.mrd-toast`	`neutral`, `info`, `success`, `warning`, `danger`

Erişilebilirlik

Toast'lar WAI-ARIA alert desenini polite biçimiyle izler: liste, etiketli bir <section> içindeki aria-live="polite" bölgesidir; yeni toast'lar araya girmeden duyurulur. İşaretçi bir toast'un üzerindeyken ya da focus içindeyken otomatik kapanma zamanlayıcısı durur.

Tuş	Ne yapar
`Tab`	Görünen toast'ların aksiyon ve kapatma butonlarına ulaşır.
`Enter`	Focus'taki aksiyon ya da kapatma butonunu çalıştırır.
`Space`	Focus'taki aksiyon ya da kapatma butonunu çalıştırır.

Kullanım ilkeleri

Yap

Kişinin az önce yaptığı bir aksiyonu birkaç kelimeyle onayla: “Değişiklikler kaydedildi”.

Kaçın

Kişinin ekranda değiştiğini zaten gördüğü bir şey için toast göstermek.

Yap

Geri alınabilen yıkıcı aksiyonlarda Geri al seçeneği sun ve o toast'u kapatılana kadar tut.

Kaçın

Tek bir olay için birkaç toast üst üste dizmek ya da uzun açıklamalar kullanmak.

İlgili sayfalar

Alert: kalıcı, satır içi bildirim.
AlertDialog: akışı durduran onay.