Get started
Data display
Data entry
General
Layout
Navigation
Blocks
Packages
The unsaved-changes dot an editor shows on a tab, announced as an image named Unsaved changes.
page.tsx
tsx
1
2
3import type { ReactNode } from 'react';
import { UnsavedIndicator } from '@/registry/bases/base-ui/components/feedback/unsaved-indicator';Installation#
bash
pnpm dlx shadcn@latest add https://ui.zeroxsolutions.com/r/unsaved-indicator.jsonUsage#
tsx
import { UnsavedIndicator } from '@/components/feedback/unsaved-indicator';tsx
<div className="flex items-center gap-2">
<span>page.tsx</span>
<UnsavedIndicator />
</div>Use it for a tab's own pending-edit dot; for a presence or connection tone, use Status Indicator instead.
API reference#
UnsavedIndicator#
Renders a span and takes every prop a span takes. It is announced as an image named "Unsaved changes";
pass aria-label to name it in another language. It sets data-slot="unsaved-indicator".