ImpersonationBanner
A sticky bar that says you are viewing as another user, or previewing, with an exit button. It is a status region, pinned so it cannot scroll away, and AdminArea uses it.
Code
{session.impersonating ? ( <ImpersonationBanner as={{ name: "Omar Khalid", email: "[email protected]" }} startedAt={session.startedAt} onExit={endImpersonation} />) : null}Admin · beta
Live examples and controls: ImpersonationBanner in the lab.
Install
npx shadcn@latest add https://docs.nasaqui.com/r/impersonation-banner.jsonThe bar that keeps an admin honest while they use the product as someone else, and that tells a person previewing a role that nothing is saved. Show it on every screen for as long as the session lasts.
When to use
- An admin or support agent acts as a customer (
mode="impersonate"). - A designer or owner previews the app as another role or plan (
mode="preview").
When not to use
- A general notice: use
Alert. - Switching your own account: use
UserMenu.
Import
import { ImpersonationBanner } from "@fadymondy/nasaq/web";Quick start
{session.impersonating ? (
<ImpersonationBanner as={{ name: "Omar Khalid", email: "[email protected]" }} startedAt={session.startedAt} onExit={endImpersonation} />
) : null}Anatomy
ImpersonationBanner data-slot="impersonation-banner", data-mode, role="status"
├─ icon shield (impersonate) or eye (preview)
├─ message "You are viewing the app as {name}" + email + hint + "Since 5 minutes ago"
└─ Button exit, with a loading stateAPI
| Prop | Type | Default | Description |
|---|---|---|---|
as | { name, email? } | required | Whose view this is. |
mode | "impersonate" | "preview" | "impersonate" | Warning colour with "actions count as this user", or info colour with "nothing is saved". |
startedAt | string | number | Date | none | Shows "Since 5 minutes ago". |
onExit | () => void | Promise<void> | required | Ends the session. A rejection keeps the bar and shows a failure. |
sticky | boolean | true | Pin to the top of the scroll container. |
hint | ReactNode | by mode | Replaces the second sentence. |
labels | ImpersonationBannerLabels | en / ar | Every string; impersonating and previewing are functions of the name. |
Examples
- Preview:
mode="preview" as={{ name: "Viewer role" }}. - Inside AdminArea: pass
impersonatingandonStopImpersonating; the frame renders this component.
Accessibility
A role="status" region announces when it appears. The exit button is a real button with a loading state; a
failed exit is announced with role="alert". The tone is never the only cue: each mode has its own icon and text.
RTL & i18n
Built-in English and Arabic. The email stays left-to-right inside an Arabic sentence; the time uses DateTime.
Styling & tokens
bg-nq-warning-soft / text-nq-warning-text for impersonation, bg-nq-info-soft / text-nq-info-text for preview.
Do / Don't
- Do render it above every screen while the session lasts.
- Do not let the exit button be hidden behind a menu.
Related
Lab
https://docs.nasaqui.com/?path=/docs/components-admin-impersonation-banner--docs
AdminUsers
User management for an admin area. Summary tiles, a filterable users table, an add-user dialog and per-row actions to verify, disable, reset password, impersonate and edit roles.
UserActionsMenu
The admin actions for one account: edit email, roles and permissions, impersonate, set a password or send a reset link, send a sign-in link, and delete. A menu or a toolbar that owns its dialogs.