Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Top Right Position Sonner for React

A Show Toast button that places This is a toast at the top right, while other toasts stay on the toaster's own position.

Show Toast is an outline button. The notice says This is a toast and appears at the top right. Other toasts stay where the toaster puts them.

Use the top right to stay in view without covering the work. The usual spot is the bottom right. A message that belongs in the page is an Alert. In React, Base UI does not set this position.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Sonner anatomy: toaster, toast, title, description, action

Usage

<>
  <Toaster />
  <Button onClick={handleShowToast} variant="outline">
    Show Toast
  </Button>
</>

FAQ

Where does this toast appear?

The button calls toast("This is a toast", { position: "top-right" }). That places this notice at the top right. Other toasts keep the position set on Toaster.

How do I put every toast in that spot?

Set position="top-right" on Toaster. This demo sets position on the one call, which is how a single notice lands somewhere the others do not.

Does the position change the message?

No. The message is the string "This is a toast". This call passes no description, icon, action, or duration.

What if I leave position off the call?

Omit position and Toaster uses bottom-right. This call passes top-right so only this notice moves. The allowed values are top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.

How do several toasts at this position stack?

Toasts along the top stack downward from that edge. This file only fires one toast, with that position on the call.

Does the demo render the toaster?

Yes. The demo renders its own Toaster beside the button, with no position of its own. In an app, render one Toaster near the root; a position on toast moves only that toast.

API Reference

Sonner

No extra props in this demo. The rest is on the Sonner page.

Button

Sets onClick={handleShowToast} and variant="outline". The rest is on the Button page.

All 24 sonner examples