@zedtech/zedkit-ui

Button

Accessible buttons with variants (default, destructive, outline, ghost) and sizes.

Stable@zedtech/zedkit-ui

Wraps: @radix-ui/react-slot, class-variance-authority

Click an action — a toast confirms it. Sizes and disabled stay for comparison.

Docs link

View props table

Who is it for?: Anyone placing actions in an admin UI.
When should I use it?: For every clickable action, including links styled as buttons.
When should I pick something else?: For navigation menus — use links or tabs instead.

Use it

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

Usage

import { Button } from "@zedtech/zedkit-ui";
<Button>Save</Button>
<Button variant="destructive" size="sm">Delete</Button>
<Button variant="outline" size="icon" aria-label="Close">×</Button>
<Button asChild variant="secondary">
  <a href="/docs">Read the docs</a>
</Button>

Variants and sizes

import { Button } from "@zedtech/zedkit-ui";
<Button size="sm">Small</Button>
<Button>Default</Button>
<Button size="lg">Large</Button>
<Button disabled>Saving…</Button>

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

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Button>Save</Button>
      <Button variant="destructive" size="sm">Delete</Button>
      <Button variant="outline" size="icon" aria-label="Close">×</Button>
      <Button asChild variant="secondary">
        <a href="/docs">Read the docs</a>
      </Button>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Native button (or asChild onto a link). Sizes sm / default / lg use px-button-inline-sm / px-button-pad / px-button-pad-lg. Height still follows --spacing control tokens.

Troubleshooting

Wrong variant colours in dark mode — ensure `.dark` is on the document root. Link styled as a button — use `asChild` with an anchor and keep visible link text. Icon-only control — pass `aria-label` (or use `IconButton` when the label should not appear as text).

Public URLs and response headers

Build CDN URLs from config; ship cache and CSP defaults for SVG objects.

IconButton

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