Blips
Documentação

Sonner

Um componente de toast opinativo para React.

Carregando…
"use client";
import { Button } from "@blips/ui/components/button";
import { toast } from "sonner";
export default function SonnerDemo() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast("Event has been created", {
          description: "Sunday, December 03, 2023 at 9:00 AM",
        })
      }
    >
      Show Toast
    </Button>
  );
}

Sobre

O Sonner é criado e mantido por emilkowalski.

Instalação

pnpm add @blips/ui

Uso

import { toast } from "sonner"
toast("O evento foi criado.")

Exemplos

Tipos

Use os diferentes tipos de toast para variar o estilo da notificação.

Carregando…
"use client";

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

export default function SonnerTypes() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="outline" onClick={() => toast("Event has been created")}>
        Default
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.success("Event has been created")}
      >
        Success
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.info("Be at the area 10 minutes before the event time")
        }
      >
        Info
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast.warning("Event start time cannot be earlier than 8am")
        }
      >
        Warning
      </Button>
      <Button
        variant="outline"
        onClick={() => toast.error("Event has not been created")}
      >
        Error
      </Button>
      <Button
        variant="outline"
        onClick={() => {
          toast.promise<{ name: string }>(
            () =>
              new Promise((resolve) =>
                setTimeout(() => resolve({ name: "Event" }), 2000)
              ),
            {
              loading: "Loading...",
              success: (data) => `${data.name} has been created`,
              error: "Error",
            }
          );
        }}
      >
        Promise
      </Button>
    </div>
  );
}

Referência da API

Consulte a Referência da API do Sonner para mais informações.

AnteriorSliderPróximoSpinner