MemoryNotice
StableA short notice that says what was saved to memory, with Manage, Undo and close.
Also known as memory updated, saved to memory
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
With actions
Memory updated
You prefer metric units.
<MemoryNotice saved="You prefer metric units." onManage={() => {}} onUndo={() => setShown(false)} onDismiss={() => setShown(false)} />Undo and close both hide the notice here.
When to use it
Says exactly what was just saved to memory, at the moment it is saved, so people can check it and take it back. It looks neutral because nothing has gone wrong.
Made of: Icon · Title · Saved text · Manage button · Undo button · Close button
Use it for
- Right after the assistant saves something about the person.
- Giving a quick way to undo a save or open the full memory list.
- Confirming a save to one project's memory, with your own title.
Not for
- Seeing or editing everything that is remembered: use MemoryList.
- Telling people that a chat is not being saved: use PrivateChatBanner.
- A warning or error the person must fix: use Callout.
Do and avoid
Memory updated
You prefer aisle seats on flights.
Memory updated
Your settings were changed.
Do
- Show it right when something is saved, and quote what was saved.
- Make Undo actually remove the item.
- Send Manage to the full memory list.
Avoid
- Do not say only "Memory updated". Name what changed.
- Do not use amber. Saving is not something the person must fix.
- Do not keep it on screen after the person closes it.
On a phone
- The notice fills the width, and the text wraps beside the icon.
- Manage and Undo sit under the text and wrap if they do not fit. Each has a 44px tap area on a touch screen.
- The dismiss button stays at the right edge, keeps its size and has a 44px tap area.
Seen in products
- ChatGPT shows a memory updated indicator (secondary source).
- Claude Settings > Memory lists individual topics that people can view and edit.
- Guidance in the brief says to surface what was saved at the moment it is saved and to show when a memory influenced an answer.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Memory updated" | Heading. |
| savedrequired | ReactNode | none | What was saved, in the person's terms. |
| onManage | () => void | none | Opens the memory manager. The button is hidden when omitted. |
| onUndo | () => void | none | Removes the saved item. The button is hidden when omitted. |
| onDismiss | () => void | none | Dismisses the notice. The close button is hidden when omitted. |
| manageLabel | string | "Manage" | Label of the manage button. |
| undoLabel | string | "Undo" | Label of the undo button. |
| dismissLabel | string | "Dismiss memory notice" | Accessible name of the close button. |
| className | string | none | Extra classes on the wrapper. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- actions
- Pass onManage or onUndo to show Manage and Undo buttons under the text.
- dismissible
- Pass onDismiss to show a close button on the right.
Tokens
Change one of these and every part that uses it follows.
--surface-sunken--border--fg-muted--radius-card
Built in
- It is a polite status message, so screen readers can read it without cutting in.
- The close button has only an icon, so it carries the name "Dismiss memory notice".
- Manage, Undo and close are real buttons that work with the keyboard.
- The icon is hidden from screen readers.
What you need to do
- Write the saved text in the person's own terms, so it makes sense when heard on its own.
- Move focus to a sensible place after Undo or close removes the notice.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide