SonnerPosition() — ui Function Reference

Architecture documentation for the SonnerPosition() function in sonner-position.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ SonnerPosition() — ui Function Reference

Dependency Diagram

graph TD
  14717dfd_a4ce_8031_0372_6ad23b9d4777["SonnerPosition()"]
  111903fd_3703_08fe_ca52_59b9660babf3["sonner-position.tsx"]
  14717dfd_a4ce_8031_0372_6ad23b9d4777 -->|defined in| 111903fd_3703_08fe_ca52_59b9660babf3
  style 14717dfd_a4ce_8031_0372_6ad23b9d4777 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/sonner-position.tsx lines 6–59

export function SonnerPosition() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "top-left" })
        }
      >
        Top Left
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "top-center" })
        }
      >
        Top Center
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "top-right" })
        }
      >
        Top Right
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "bottom-left" })
        }
      >
        Bottom Left
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "bottom-center" })
        }
      >
        Bottom Center
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "bottom-right" })
        }
      >
        Bottom Right
      </Button>
    </div>
  )
}