@zedtech/zedkit-ui

Badge

Small status/count pills with semantic variants.

Stable@zedtech/zedkit-ui

Wraps: class-variance-authority

beta

12 events

stable

deprecated

View props table

Who is it for?: Developers flagging state or counts inline (lists, headers, tables).
When should I use it?: For short labels next to the thing they describe.
When should I pick something else?: For long text or actions — use Text or Button instead.

Use it

Examples import from the package. With copied source, import from @/components/ui/badge instead.

Simple

import { Badge } from "@zedtech/zedkit-ui";
<Badge>live</Badge>

Variants

Pipeline runs for Harbor Studio, last 24 hours

Deploy to staging

3 retries

Nightly orders export

failed

Image optimisation

queued

Storefront build

passed

import { Badge } from "@zedtech/zedkit-ui";
<Badge variant="outline">3 retries</Badge>
<Badge variant="destructive">failed</Badge>

In a table row

Background jobs
Job	Target	State
sync	Product catalogue	queued
export	Orders, October	running
backup	Customer files	done

import { Badge } from "@zedtech/zedkit-ui";
<tr>
  <td>sync</td>
  <td><Badge variant="secondary">queued</Badge></td>
</tr>

As a link (asChild)

Harbor Studio platform

all systems go

import { Badge } from "@zedtech/zedkit-ui";
<Badge asChild variant="secondary">
  <a href="/status">all systems go</a>
</Badge>

Soft status

Harbor Studio jobs, last hour

Image optimisation

passed

Deploy to staging

retry

Nightly orders export

failed

Storefront cache

notice

Catalogue sync

queued

import { Badge } from "@zedtech/zedkit-ui";
<Badge variant="soft-success">passed</Badge>
<Badge variant="soft-warning">retry</Badge>
<Badge variant="soft-danger">failed</Badge>
<Badge variant="soft-info">notice</Badge>
<Badge variant="soft-neutral">queued</Badge>

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 { Badge } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Badge>live</Badge>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Default badge is a div (not a live region). Use asChild with an anchor or button for links; focus-ring applies on keyboard focus. Keep labels short. Corners follow identity --radius-md via rounded-md; identity label tracking already keys off px-badge-inline.

Troubleshooting

Wrong colors in dark mode — ensure `.dark` is on the document root. `BadgeProps` is defined in `badge.tsx` for typing; import types from the same module when using the registry copy.

IconButton

Icon-only controls with matching `aria-label` and `title` from one `label` prop.

Toaster

A root toaster plus toast() calls for transient notifications.