Toast

Componente de notificação temporária usado para mostrar mensagens de feedback ao usuário.

Configuração

Adicione o componente ToastProvider ao layout raiz ou a um componente central da sua aplicação.

import { ToastProvider } from "@medway-ui/core";
 
export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR">
      <body>
        <main>{children}</main>
        <ToastProvider />
      </body>
    </html>
  );
}

Exemplos

Primary

Secondary

Success

Warning

Error

Green Gradient

Gold Gradient

Silver Gradient

Bronze Gradient

Com ação

Sem ícone

Ícone personalizado

Sem descrição

API

useToast

Os toasts são criados de forma imperativa pelo hook useToast(), que precisa ser chamado em um Client Component. O ToastProvider renderiza cada toast da fila com título, descrição, a action opcional e um botão ToastClose. No máximo 3 toasts aparecem ao mesmo tempo (o mais recente primeiro).

const { toast, dismiss, toasts } = useToast();
 
const { id, update, dismiss: dismissThis } = toast({
  title: "Salvo",
  description: "Suas alterações foram salvas.",
  variant: "success",
});

Toast

ToastAction

ToastProvider

Renderiza os toasts enfileirados pelo useToast() e o viewport onde todos os toasts aparecem. Aceita children opcionais: toasts montados à mão ficam dentro dele e dividem o mesmo viewport com os da fila. Sem children, funciona exatamente como antes. Para mudar o viewport (rótulo, atalho ou classes), passe as props dele em viewportProps, por exemplo <ToastProvider viewportProps={{ label: "Avisos ({hotkey})" }} />.

"use client";
 
import { useState } from "react";
import { Toast, ToastClose, ToastProvider, ToastTitle } from "@medway-ui/core";
 
function ManualToast() {
  const [open, setOpen] = useState(true);
 
  return (
    <Toast open={open} onOpenChange={setOpen}>
      <ToastTitle>Alterações salvas</ToastTitle>
      <ToastClose />
    </Toast>
  );
}
 
export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <ToastProvider>
        <ManualToast />
      </ToastProvider>
    </>
  );
}

ToastClose

Botão de fechar só com ícone, feito com o Dismiss (28×28). O ToastProvider já renderiza um em cada toast, então use direto só quando montar um Toast à mão dentro do ToastProvider.

ToastTitle

Título do toast, em destaque. O ToastProvider já o renderiza a partir do title passado ao toast(); use direto só ao montar um Toast à mão. Aceita as props do Toast.Title do Radix.

ToastDescription

Texto de apoio exibido abaixo do título. O ToastProvider já o renderiza a partir do description passado ao toast(); use direto só ao montar um Toast à mão. Aceita as props do Toast.Description do Radix.

ToastViewport

Região fixa no canto superior direito da tela onde os toasts aparecem. O ToastProvider já renderiza um, então não é preciso adicioná-lo à mão: as props abaixo são passadas pelo viewportProps do ToastProvider. Aceita as props do Toast.Viewport do Radix.