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
  f1600034_bb87_c831_1bd1_fe615b7c24dc["SonnerPosition()"]
  a2f8e95a_bb27_d028_7c93_4940ae40d89f["sonner-position.tsx"]
  f1600034_bb87_c831_1bd1_fe615b7c24dc -->|defined in| a2f8e95a_bb27_d028_7c93_4940ae40d89f
  style f1600034_bb87_c831_1bd1_fe615b7c24dc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/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>
  )
}