17Shipped
Toast
Ephemeral confirmation and error feedback. Toaster + createToastStore.
Import
import { Toaster, createToastStore } from "@charply/design"
const toast = createToastStore()Variants
Success
Mount Toaster once; call toast.success() from anywhere
Reply copied to clipboard
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| store | ToastStore | Imperative toast store from createToastStore() | |
| position | "bottom-right" | "bottom-center" | "top-right" | "bottom-right" | Viewport placement |
Guidelines
docs/design/components/toast.mdDo
- ✓Use for short confirmation after copy, save, delete, post
- ✓Mount `<Toaster store={toast} />` once in popup and side panel roots
- ✓Keep messages scannable — one sentence
Don't
- ✗Use toast for errors that need remediation UI — use `Callout` or `Alert`
- ✗Stack duplicate toasts for the same action
- ✗Mount multiple Toasters on the same store
- ✗---
See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.