72Başlayın
HextaUI

Toast

Düzgünce üst üste binen, hover'da genişleyen, kaydırılarak kapatılan ve yükleme durumunu yerinde başarıya ya da hataya çeviren kısa mesajlar.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastDemo() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast("Event created", {
          description: "Sunday, December 3 at 9:00 AM",
          action: { label: "Undo", onClick: () => toast("Event removed") },
        })
      }
    >
      Show toast
    </Button>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/toast.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

<Toaster /> bileşenini uygulamanızın köküne yakın bir yere bir kez ekleyin.

import { Toaster } from "@/components/ui/toast"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  )
}

Ardından toast'u React bileşenlerinin dışı dahil her yerden çağırın.

import { toast } from "@/components/ui/toast"

toast("Event created", { description: "Sunday at 9:00 AM" })
toast.success("Payment received")
toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Couldn't save" })

Toast'lar en yenisi önde olacak şekilde düzgün bir yığın oluşturur. Yelpaze gibi açmak için yığının üzerine gelin veya odaklanın; okurken tüm zamanlayıcılar durur. Kapatmak için bir toast'u kenarına doğru kaydırın.

Örnekler

Türler

Her toast aynı sakin yüzeyi kullanır; rengi yalnızca simge taşır.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastTypes() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <Button variant="outline" size="sm" onClick={() => toast("Draft saved")}>
        Default
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() => toast.success("Payment received")}
      >
        Success
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() =>
          toast.error("Couldn't upload photo", {
            description: "The file is larger than 10 MB.",
          })
        }
      >
        Error
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() => toast.warning("Storage almost full")}
      >
        Warning
      </Button>
      <Button
        variant="outline"
        size="sm"
        onClick={() => toast.info("A new version is available")}
      >
        Info
      </Button>
    </div>
  )
}

Promise

toast.promise bir spinner gösterir, sonra yerinde bir başarı veya hata toast'una dönüşür; simge değişirken fırlayarak belirir.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

let attempt = 0

function deploy() {
  attempt += 1
  const fails = attempt % 2 === 0
  return new Promise<{ url: string }>((resolve, reject) =>
    setTimeout(
      () =>
        fails
          ? reject(new Error("Build failed"))
          : resolve({ url: "hextaui.com" }),
      1800
    )
  )
}

export function ToastPromise() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast.promise(deploy(), {
          loading: "Deploying…",
          success: (data) => ({
            title: "Deployed",
            description: `Live at ${data.url}`,
          }),
          error: (error) => ({
            title: "Deploy failed",
            description: error instanceof Error ? error.message : "Try again.",
          }),
        })
      }
    >
      Deploy (fails every other time)
    </Button>
  )
}

Action

Undo gibi bir düğme için action verin. Ona tıklamak toast'u da kapatır.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastAction() {
  const [archived, setArchived] = React.useState(0)

  return (
    <div className="flex flex-col items-center gap-3">
      <Button
        variant="outline"
        onClick={() => {
          setArchived((count) => count + 1)
          toast("Conversation archived", {
            action: {
              label: "Undo",
              onClick: () => setArchived((count) => count - 1),
            },
          })
        }}
      >
        Archive
      </Button>
      <p className="text-sm text-muted-foreground tabular-nums">
        {archived} archived
      </p>
    </div>
  )
}

Yerinde güncelle

toast.loading'den gelen id'yi saklayın ve türü dahil toast.update ile değiştirin.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastUpdate() {
  return (
    <Button
      variant="outline"
      onClick={() => {
        const id = toast.loading("Uploading 3 files…")
        setTimeout(() => toast.update(id, { title: "Uploading 2 of 3…" }), 900)
        setTimeout(
          () =>
            toast.update(id, {
              type: "success",
              title: "Upload complete",
              description: "3 files added to Photos.",
            }),
          1800
        )
      }}
    >
      Upload files
    </Button>
  )
}

Kopya yok

Bir toast'a id verin; yeniden çağırmak bir kopya yığmak yerine mevcut olanı günceller.

"use client"

import { Button } from "@/components/ui/button"
import { toast } from "@/components/ui/toast"

export function ToastDedupe() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast.info("You're offline", {
          id: "offline",
          description: "Changes will sync when you reconnect.",
        })
      }
    >
      Go offline (click twice)
    </Button>
  )
}

Klavye

TuşAction
F6Odağı toast'lara taşır ve onları yelpaze gibi açar.
TabToast eylemleri ve kapatma düğmeleri arasında gezinir.
EscOdaktaki toast'u kapatır.

Erişilebilirlik

  • Toast'lar nazikçe duyurulur; toast.error hemen duyurulur.
  • İşaretçi veya odak toast'ların üzerindeyken zamanlayıcılar durur, böylece kimsenin bir geri sayımla yarışması gerekmez.
  • Kapatma düğmeleri hover ve odakta görünür, dokunmatik ekranlarda her zaman görünür.
  • Azaltılmış harekette toast'lar kayarak değil solarak girer.

API referansı

Toaster

PropTürVarsayılan
positionTelefonlar her zaman tam genişliği kullanır.
"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right""bottom-right"
limitAynı anda gösterilen toast'lar; eskiler solar.
number3
timeoutEkranda kalma süresi varsayılanı, ms cinsinden.
number5000
ÖznitelikAçıklama
data-slot="toaster"Viewport; data-position ile.
data-slot="toast"Her toast; data-type, data-expanded ve data-swiping ile.

toast()

PropTürVarsayılan
description
ReactNode–
action
{ label: ReactNode; onClick?: (event) => void }–
idÇoğaltmak yerine güncellemek için yeniden kullanın.
string–
timeoutVarsayılan olarak Toaster zaman aşımıdır. Uzun mesajlar dakikada yaklaşık 250 sözcük hesabıyla daha uzun kalır.
number–
priority
"low" | "high""low"
onClose
() => void–
onRemove
() => void–

Ayrıca toast.success, toast.error, toast.warning, toast.info, toast.loading, toast.promise, toast.update ve toast.dismiss. Her biri toast'un id'sini döndürür veya alır.

İlgili

Kullanıldığı bloklar

Toast üzerine kurulan bloklar.