PrivateChatBanner
StableA notice that stays visible during a private chat, says how long a copy is kept, and has Exit.
Also known as incognito, temporary chat, private mode
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Full banner
Private chat
Not saved to your history or memory and not used for training. A copy may be kept for 30 days.
<PrivateChatBanner onExit={() => {}} />Full width. Says how long a copy is kept.
When to use it
Keeps it clear, for the whole chat, that this chat is private and how long a copy is kept. It looks neutral because a private chat is a choice, not a problem.
Made of: Icon · Name · How long a copy is kept · Exit button
Use it for
- The top of a private or temporary chat, for as long as it lasts.
- A small pill in the top bar when space is tight.
- Stating your product's real retention time in your own words.
Not for
- Confirming that something was saved to memory: use MemoryNotice.
- A warning the person must act on: use Callout.
Do and avoid
Private chat
Not saved to your history or memory and not used for training. A copy may be kept for 30 days.
Private chat
Nothing from this chat is ever stored.
Do
- Keep it visible for the whole private chat.
- Use the small pill when space is tight.
- Change the description if your retention time is not 30 days. The default text says a copy may be kept for 30 days.
Avoid
- Do not imply that nothing is stored if a copy is kept.
- Do not use amber. Private mode is a choice, not a problem.
- Do not offer to turn it into a regular chat unless your product can.
On a phone
- The banner fills the width and wraps: the text has a 224px base width, so the Exit button drops to its own line when the row is tight.
- The compact pill stays one line and keeps its desktop height. Its exit button keeps its size and has a 44px tap area on a touch screen.
Seen in products
- Claude shows a ghost icon at top right when starting a chat. While active the chat shows an Incognito chat label and a black border, and an x closes it.
- Claude incognito chats are not saved to history or memory, not used for training, retained 30 days and cannot be converted to a regular chat.
- Claude incognito chats open in the previous chat experience, so Claude cannot create files or run code in them.
- Gemini Temporary Chat (August 2025) is not saved to history and not used for training. ChatGPT has Temporary Chat.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "banner" | "compact" | "banner" | Full-width strip or header pill. |
| label | string | "Private chat" | Name of the mode. |
| description | ReactNode | none | Retention copy. The default says a copy may be kept for 30 days, so change it if your period differs. |
| onExit | () => void | none | Leaves the private chat. The action is hidden when omitted. |
| exitLabel | string | "Exit" | Label of the banner exit button. |
| className | string | none | Extra classes on the wrapper. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one PrivateChatBanner switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Variant | variant | Banner, Compact |
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.
- compact
- Set variant to compact for a small pill instead of the full banner.
- exit
- Pass onExit to show an Exit button (a close icon in the compact form).
Tokens
Change one of these and every part that uses it follows.
--surface-sunken--border-strong--fg-muted--radius-control--radius-card
Built in
- The full banner is a region named by its label, so screen readers can jump to it.
- The small pill's close button has only an icon, and its name includes the mode, such as "Exit private chat".
- The state is said in words, not by color or a border alone.
- The ghost icon is hidden from screen readers.
What you need to do
- Place the banner before the chat, so screen reader users meet it first. It is not read out when it appears.
- Move focus to a sensible place when Exit ends the private chat.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide