SonnerTypes() — ui Function Reference

Architecture documentation for the SonnerTypes() function in sonner-types.tsx from the ui codebase.

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ SonnerTypes() — ui Function Reference

Dependency Diagram

graph TD
  87b1cfcf_215f_d69d_2d7b_6634630d712e["SonnerTypes()"]
  a096fac0_d55a_159f_f95f_53dab0165a7d["sonner-types.tsx"]
  87b1cfcf_215f_d69d_2d7b_6634630d712e -->|defined in| a096fac0_d55a_159f_f95f_53dab0165a7d
  style 87b1cfcf_215f_d69d_2d7b_6634630d712e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/sonner-types.tsx lines 6–60

export 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>
  )
}