ButtonFreev1.0.0
shadcn's Button in Notchset: square, mono caps, a tick ruler on hover, a five-tick scanner while it works and a check that traces itself when it's done, at a width that never moves. The Plate variant presses onto its plate; the link draws its rule from the left.
Live preview
Installation
Base UI
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/button.jsonRadix
pnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/button.jsonFree, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.
Install by hand
- 1. Add the packages
pnpm add @base-ui/react@^1 class-variance-authority@^0.7 - 2. Copy the files to these paths (Source below, or save them all as a .zip)
- components/ui/notchset/button.tsx
- components/ui/notchset/button-client.tsx
- lib/beautiful-ui/notchset/button-variants.ts
- lib/beautiful-ui/notchset/button.tsx
- lib/beautiful-ui/notchset/instrument.tsx
- lib/beautiful-ui/notchset/root.ts
- 3. No stylesheet needed.
- 4. Install what it builds on first: shadcn's cn helper (lib/utils.ts, from npx shadcn init), the theme foundation (its tokens and base styles)
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import { Button, buttonVariants } from "@/components/ui/notchset/button";
export function EvalActions({ runEval, deploy }: { runEval: () => Promise<void>; deploy: () => void }) {
return (
<div className="flex flex-wrap items-center gap-3">
{/* Async onClick: the button shows its loading and success states on its own. */}
<Button icon="play" kbd="⌘↵" loadingLabel="Running" successLabel="Done" onClick={runEval}>
Run eval
</Button>
<Button variant="plate" icon="arrow" onClick={deploy}>
Deploy
</Button>
<a className={buttonVariants({ variant: "link" })} href="/docs">
Docs
</a>
</div>
);
}Props
variant–"default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "plate"shadcn's six, plus Plate: a key that rests on a 1px plate and presses onto it.
size–"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"32 / 24 / 28 / 40px; icon sizes are squares. 44px on coarse pointers via your own className if needed.
icon–"play" | "arrow" | "plus" | "trace" | "stop" | "copy" | "external" | ReactNodeA Notchset glyph or your own svg; the scanner and check take its place.
iconPosition–"left" | "right"Default left.
kbd–stringA shortcut hint in a box; sets aria-keyshortcuts.
loading / success–booleanControlled states.
Show all 11 propsShow fewer
loadingLabel / successLabel–stringThe words while working and when done; the widest label sets the width.
successHold–numberHow long an automatic success shows (ms). Default 1400.
flat–booleanNo hover ruler, and no plate on Plate.
onClick–(event) => unknownReturn a Promise and the button runs itself.
render (Base UI) / asChild (Radix)–as shadcnRender as a link or your own element.
Source
components/ui/notchset/button.tsx
Loading the code
