one notification moves from loading to success without jumping position.
components / 15
marked toast
feedback should arrive like a note in the margin. quick, human, and clear about what changed.
shadcn
npx shadcn@latest add berkantay/cheez/marked-toastposition
character
frame
live
click any signalstatus desk
behavior
same manager, different jobsfull lifecycle
keep a stable id while the title, copy, timing, and drawing change.
attach a native button with the same keyboard and screen-reader behavior.
timeout zero keeps important feedback present until it is dismissed.
fire more than the visible limit. older signals wait without breaking order.
the manager can close one known id or clear the whole stack at once.
composition
producers can live anywhere below itone provider
<MarkedToastProvider
position="bottom-right"
character="rushed"
frameMark="rounded-box"
>
<App />
</MarkedToastProvider>
const toast = useMarkedToast()
toast.add({
type: "success",
title: "changes published",
description: "the new version is live.",
})reference
provider and managerapi
| part | prop | type | default | purpose |
|---|---|---|---|---|
| Provider | timeout | number | 5000 | default dismissal delay; zero persists |
| Provider | limit | number | 3 | visible stack size before older items hide |
| Provider | position | MarkedToastPosition | "bottom-right" | viewport corner |
| Provider | character | CheezCharacter | "rushed" | drawing personality |
| Provider | frameMark | CheezType | "rounded-box" | notification boundary |
| Provider | thickness | number | 1 | all pen weight |
| Provider | toastManager | ToastManager | — | dispatch outside React |
| add | title | ReactNode | — | primary announcement |
| add | description | ReactNode | — | supporting copy |
| add | type | MarkedToastType | "default" | status drawing and ink |
| add | timeout | number | provider | per-toast dismissal delay |
| add | priority | "low" | "high" | "low" | screen-reader announcement urgency |
| add | actionProps | button props | — | optional accessible action |
| add | data | MarkedToastData | — | per-toast mark and color overrides |
| manager | update | (id, options) => void | — | replace a toast in place |
| manager | promise | (promise, states) => Promise | — | loading, success, and error lifecycle |
| manager | close | (id?) => void | — | dismiss one or every toast |
behavior notes
- the visible boundary, status glyph, and close symbol are all Cheez marks
- hovering or focusing the viewport unfolds the stack
- swipe away follows the viewport edge and keyboard focus remains intact
- high priority uses an urgent live-region announcement
- promise states update one toast instead of producing three competing messages
- reduced-motion preferences shorten transitions while keeping state changes legible