@zedtech/zedkit-ui

StatusLabel

A named live-region label for the current operation state (loading, saved, error…).

Stable@zedtech/zedkit-ui

Wraps: (none)

Saving report…All changes savedCould not saveYou are offline

View props table

Who is it for?: Developers naming a background or foreground operation for the user.
When should I use it?: Next to the content an operation affects, while it runs or right after.
When should I pick something else?: For bare spinners without a name — use `ProgressBar`; for data age — use `UpdatedAgo`.

Use it

Examples import from the package. With copied source, import from @/components/ui/status-label instead.

Loading operation

import { StatusLabel } from "@zedtech/zedkit-ui";
<StatusLabel tone="loading">Saving report…</StatusLabel> // loading|updating|syncing|saved|retry|error|offline, role=status

Saved and error states

Project notes

All changes saved

Invoice draft

Could not save

import { StatusLabel } from "@zedtech/zedkit-ui";
<StatusLabel tone="saved">All changes saved</StatusLabel>
<StatusLabel tone="error">Could not save</StatusLabel>

Offline state

You are offline

import { StatusLabel } from "@zedtech/zedkit-ui";
<StatusLabel tone="offline">You are offline</StatusLabel>

Kit not installed yet?

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

src/app/page.tsxReplace the contents

import { StatusLabel } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <StatusLabel tone="loading">Saving report…</StatusLabel> // loading|updating|syncing|saved|retry|error|offline, role=status
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

role=status announces the named operation; icon/text gap is gap-icon.

Troubleshooting

Announcement spam — one live label per operation; unmount or repurpose it when done. Wrong tone icon — `loading`/`updating`/`syncing` share the active dot; only `saved` shows the check. Unknown stream stage names are dropped unless you pass `stages` to `readAssistantStreamEvent` / `isAssistantStreamStage`; `StreamStatus` only words the default list — pass `label` for any other name.

Skeletons

One faithful loading skeleton per kit component shape, each a named live zone.

UpdatedAgo

A relative "Updated N minutes ago" stamp via `Intl.RelativeTimeFormat`, no date library.