Position toasters
Five toast triggers that keep the same body and vary only where the stack anchors: top right, top center, bottom left, bottom center and top left. The entrance direction follows the anchor. Each is self-contained (no sonner package), sized, token-driven, and auto-dismisses.
SonnerPosition
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/sonner-positionDependencies, the @ai2/tokens theme and the component file are installed together.
Install dependencies
npm install motion lucide-reactCopy the source
components/ui/sonner-position.tsxTS
"use client"
import * as React from "react"
import { AlertTriangle, CheckCircle, Info, X } from "lucide-react"
import { AnimatePresence, motion, useReducedMotion } from "motion/react"
import { cn } from "@/lib/utils"
/* Styled sonner - position family: 5 self-contained toasters. NO sonner package and
NO portal - each export renders a demo trigger button; clicking it pushes a toast
onto a LOCAL stack (a useState array). The difference: where the stack anchors on
screen (top-right, top-center, bottom-left, bottom-center, top-left). The entry
direction is chosen from the anchor. Multiple toasts stack on top of each other
and disappear on a timeout or via the close button. Color comes ONLY from tokens,
via alpha color-mix. Deterministic: the ids come from a ref counter (NO
Date.now/Math.random) and the timeout is fixed. */
export type StyledSize = "sm" | "md" | "lg" | "xl"
export type StyledTone = "success" | "info" | "warning" | "danger"
/* Toast genisligi size'a bagli. */
const toastWidth: Record<StyledSize, string> = {
sm: "w-64",
md: "w-72",
lg: "w-80",
xl: "w-96",
}
/* Tone -> ikon rengi (semantic token). */
const toneIconColor: Record<StyledTone, string> = {
success: "text-success",
info: "text-info",
warning: "text-warning-soft-foreground",
danger: "text-danger",
}
/* Tone -> ikon bileseni. */
const toneIcon: Record<StyledTone, React.ComponentType<{ className?: string }>> = {
success: CheckCircle,
info: Info,
warning: AlertTriangle,
danger: X,
}
const triggerBtn =
"inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-border bg-secondary px-4 text-sm font-medium text-secondary-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_6%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"
const closeBtn =
"inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)] hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"
const toastBase =
"pointer-events-auto relative flex items-start gap-3 overflow-hidden rounded-xl border border-border bg-popover p-4 text-sm text-popover-foreground shadow-lg [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none"
/* Otomatik kapanma suresi (sabit, deterministik). */
const TOAST_MS = 4000
type Anchor = "top-right" | "top-center" | "bottom-left" | "bottom-center" | "top-left"
/* Ankraj -> fixed konum + hizalama. */
const anchorClass: Record<Anchor, string> = {
"top-right": "top-0 right-0 items-end",
"top-center": "top-0 left-1/2 -translate-x-1/2 items-center",
"bottom-left": "bottom-0 left-0 items-start",
"bottom-center": "bottom-0 left-1/2 -translate-x-1/2 items-center",
"top-left": "top-0 left-0 items-start",
}
/* Ankraj -> giris/cikis ofseti. Kenardan iceri kayar. */
const anchorOffset: Record<Anchor, { x: number; y: number }> = {
"top-right": { x: 32, y: 0 },
"top-center": { x: 0, y: -24 },
"bottom-left": { x: -32, y: 0 },
"bottom-center": { x: 0, y: 24 },
"top-left": { x: -32, y: 0 },
}
const stackClass = "pointer-events-none fixed z-50 flex flex-col gap-2 p-4"
/* A slide+fade relative to the anchor; instant under reduced-motion (opacity
only). */
function toastMotion(anchor: Anchor, reduce: boolean | null) {
if (reduce) {
return {
initial: { opacity: 0 },
animate: { opacity: 1 },
exit: { opacity: 0 },
transition: { duration: 0.12 },
}
}
const off = anchorOffset[anchor]
return {
initial: { opacity: 0, x: off.x, y: off.y, scale: 0.96 },
animate: { opacity: 1, x: 0, y: 0, scale: 1 },
exit: { opacity: 0, x: off.x, y: off.y, scale: 0.96 },
transition: { type: "spring" as const, stiffness: 320, damping: 28 },
}
}
interface ToastItem {
id: number
message: string
}
/* Shared stack logic: ref-counted id, fixed timeout, every timer cleared on
unmount (no setState-after-unmount). */
function useToastStack(message: string) {
const [items, setItems] = React.useState<ToastItem[]>([])
const counter = React.useRef(0)
const timers = React.useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map())
const dismiss = React.useCallback((id: number) => {
setItems((prev) => prev.filter((t) => t.id !== id))
const timer = timers.current.get(id)
if (timer) {
clearTimeout(timer)
timers.current.delete(id)
}
}, [])
const push = React.useCallback(() => {
const id = counter.current++
setItems((prev) => [...prev, { id, message }])
const timer = setTimeout(() => dismiss(id), TOAST_MS)
timers.current.set(id, timer)
}, [dismiss, message])
React.useEffect(() => {
const map = timers.current
return () => {
map.forEach((t) => clearTimeout(t))
map.clear()
}
}, [])
return { items, push, dismiss }
}
interface PositionToasterProps {
className?: string
size?: StyledSize
tone?: StyledTone
label?: React.ReactNode
}
/* A single body: only the anchor and the message change. */
function PositionToaster({
anchor,
message,
className,
size = "md",
tone = "info",
label = "Show toast",
}: PositionToasterProps & { anchor: Anchor; message: string }) {
const reduce = useReducedMotion()
const { items, push, dismiss } = useToastStack(message)
const m = toastMotion(anchor, reduce)
const Icon = toneIcon[tone]
return (
<div data-slot="styled-sonner" className={cn("inline-flex", className)}>
<button type="button" className={triggerBtn} onClick={push}>
{label}
</button>
<div className={cn(stackClass, anchorClass[anchor])}>
<AnimatePresence initial={false}>
{items.map((t) => (
<motion.div
key={t.id}
role="status"
data-tone={tone}
className={cn(toastBase, toastWidth[size])}
initial={m.initial}
animate={m.animate}
exit={m.exit}
transition={m.transition}
layout={!reduce}
>
<Icon className={cn("mt-0.5", toneIconColor[tone])} />
<div className="min-w-0 flex-1 pt-0.5">{t.message}</div>
<button
type="button"
aria-label="Dismiss"
className={closeBtn}
onClick={() => dismiss(t.id)}
>
<X />
</button>
</motion.div>
))}
</AnimatePresence>
</div>
</div>
)
}
/* ------------------------------------------------------------- TopRightToaster
Stack sag ust kosede toplanir, sagdan iceri kayar. */
export function TopRightToaster(props: PositionToasterProps) {
return <PositionToaster anchor="top-right" message="Pinned to the top right." {...props} />
}
/* ------------------------------------------------------------ TopCenterToaster
Stack ust orta hatta toplanir, yukaridan asagi iner. */
export function TopCenterToaster(props: PositionToasterProps) {
return <PositionToaster anchor="top-center" message="Dropped in from the top." {...props} />
}
/* ----------------------------------------------------------- BottomLeftToaster
Stack sol alt kosede toplanir, soldan iceri kayar. */
export function BottomLeftToaster(props: PositionToasterProps) {
return <PositionToaster anchor="bottom-left" message="Anchored bottom left." {...props} />
}
/* --------------------------------------------------------- BottomCenterToaster
Stack alt orta hatta toplanir, asagidan yukari kalkar. */
export function BottomCenterToaster(props: PositionToasterProps) {
return <PositionToaster anchor="bottom-center" message="Raised from the bottom." {...props} />
}
/* -------------------------------------------------------------- TopLeftToaster
Stack sol ust kosede toplanir, soldan iceri kayar. */
export function TopLeftToaster(props: PositionToasterProps) {
return <PositionToaster anchor="top-left" message="Parked at the top left." {...props} />
}Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.
Variations
5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.
Top right
The stack collects in the top right corner and slides in from the right.
TS
import { TopRightToaster } from "@/components/ui/sonner-position"
<TopRightToaster />sm
md
lg
xl
Top center
The stack centers along the top edge and drops down into view.
TS
import { TopCenterToaster } from "@/components/ui/sonner-position"
<TopCenterToaster />sm
md
lg
xl
Bottom left
The stack collects in the bottom left corner and slides in from the left.
TS
import { BottomLeftToaster } from "@/components/ui/sonner-position"
<BottomLeftToaster />sm
md
lg
xl
Bottom center
The stack centers along the bottom edge and rises into view.
TS
import { BottomCenterToaster } from "@/components/ui/sonner-position"
<BottomCenterToaster />sm
md
lg
xl
Top left
The stack collects in the top left corner and slides in from the left.
TS
import { TopLeftToaster } from "@/components/ui/sonner-position"
<TopLeftToaster />sm
md
lg
xl
ai2 Position toasters: 5 styled variations on the token system
The ai2 Position toasters are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around toast triggers that anchor the stack to a different screen corner or edge. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.
Motion runs on framer-motion: framer-motion slides each toast in from the nearest edge and stacks the rest. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the slide is skipped and the toast fades in place.
What is in the ai2 Position toasters?
5 exports in one file: Top right, Top center, Bottom left, Bottom center and Top left. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.
You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.
Why use it
- On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
- Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
- Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.
Features
- Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
- framer-motion: framer-motion slides each toast in from the nearest edge and stacks the rest.
- Reduced-motion aware: Under prefers-reduced-motion, the slide is skipped and the toast fades in place.
- Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.
Production tips
- Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
- Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
- Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.
Works with the rest of ai2
The Position toasters sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.