SonnerDemo() — ui Function Reference

Architecture documentation for the SonnerDemo() function in sonner-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ SonnerDemo() — ui Function Reference

Dependency Diagram

graph TD
  043d4393_64fa_4858_f075_ac05fe9542ae["SonnerDemo()"]
  6eb4cdf6_ecd6_05a0_9c33_0f6e405c8042["sonner-demo.tsx"]
  043d4393_64fa_4858_f075_ac05fe9542ae -->|defined in| 6eb4cdf6_ecd6_05a0_9c33_0f6e405c8042
  style 043d4393_64fa_4858_f075_ac05fe9542ae fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/sonner-demo.tsx lines 96–132

export function SonnerDemo() {
  const [activeType, setActiveType] = React.useState(allTypes[0])
  return (
    <div className="flex flex-wrap gap-4">
      <Button onClick={() => toast("My first toast")} variant="outline">
        Give me a toast
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", {
            description: "Sunday, December 03, 2023 at 9:00 AM",
            action: {
              label: "Undo",
              onClick: () => console.log("Undo"),
            },
          })
        }
      >
        Show Toast
      </Button>
      {allTypes.map((type) => (
        <Button
          variant="ghost"
          data-active={activeType.name === type.name}
          onClick={() => {
            type.action()
            setActiveType(type)
          }}
          key={type.name}
        >
          {type.name}
        </Button>
      ))}
    </div>
  )
}