Button

The button, and the variant table half the registry borrows.

import { Div } from "@implementjs/core";
import { PlusIcon } from "@implementjs/lucide";
import { Button } from "@/lib/components/ui/button";

export default function ButtonDemo() {
	return Div(
		{ class: "flex flex-wrap items-center justify-center gap-2" },
		Button("Default"),
		Button({ variant: "secondary" }, "Secondary"),
		Button({ variant: "outline" }, "Outline"),
		Button({ variant: "ghost" }, "Ghost"),
		Button({ variant: "destructive" }, "Destructive"),
		Button({ variant: "link" }, "Link"),
		Button({ variant: "outline", size: "sm" }, PlusIcon({ "aria-hidden": true }), "New"),
		Button({ size: "icon", "aria-label": "Add" }, PlusIcon({ "aria-hidden": true })),
		Button({ disabled: true }, "Disabled"),
	);
}

Installation

npx jsrepo add @implementjs/ui/button

It installs tailwind-variants at the same time.

Copy the file below to src/lib/components/ui/button.ts. It imports cn, so copy utils.ts to src/lib/utils.ts too. Then, on top of @implementjs/core and @implementjs/primitives:

npm install tailwind-variants

src/lib/components/ui/button.ts

import {
	Button as ButtonPrimitive,
	type Child,
	type ElementProps,
	type Mountable,
} from "@implementjs/core";
import { createComponent } from "@implementjs/primitives";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";

export const buttonVariants = tv({
	base: "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
	variants: {
		variant: {
			default: "bg-primary text-primary-foreground hover:bg-primary/90",
			destructive:
				"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
			outline:
				"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
			ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
			link: "text-primary underline-offset-4 hover:underline",
		},
		size: {
			default: "h-9 px-4 py-2 has-[>svg]:px-3",
			xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
			sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
			lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
			icon: "size-9",
			"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
			"icon-sm": "size-8",
			"icon-lg": "size-10",
		},
	},
	defaultVariants: {
		variant: "default",
		size: "default",
	},
});

export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
export type ButtonSize = VariantProps<typeof buttonVariants>["size"];

export type ButtonProps = ElementProps<"button"> & VariantProps<typeof buttonVariants>;

export const Button = createComponent(function Button(
	{
		variant = "default",
		size = "default",
		class: className,
		type = "button",
		...props
	}: ButtonProps,
	...children: Child[]
): Mountable {
	return ButtonPrimitive(
		{
			type,
			...props,
			"data-slot": "button",
			"data-variant": variant,
			"data-size": size,
			class: cn(buttonVariants({ variant, size }), className),
		},
		...children,
	);
});

Usage

buttonVariants is the part that travels. A dialog trigger, a popover close, the calendar's arrows, a toast action — none of them are Button, but all of them render through this table, which is why one edit here restyles the whole registry.

import { Button, buttonVariants } from "@/lib/components/ui/button";

Button({ variant: "outline", size: "sm" }, "Save");

// the same styles on something that is not a button
A({ href: "/docs", class: buttonVariants({ variant: "link" }) }, "Read the docs");

Icons

An icon in a button is sized and made non-interactive by the base styles, so it needs no classes of its own. Give an icon-only button an aria-label — there is no text to name it:

Button({ size: "icon", "aria-label": "Add" }, PlusIcon({ "aria-hidden": true }));

has-[>svg] trims the horizontal padding when a button holds both an icon and a label, so the pair stays optically centered.

Overriding

class is merged with the variant table, not appended to it, so a utility you pass wins over the one the variant baked in:

Button({ size: "icon", class: "size-20" }); // 20, not 9
Button({ variant: "outline", class: "border-destructive" });

That holds for every component in the registry — see Merging classes.

Variants elsewhere

ButtonVariant and ButtonSize are exported as types. Components that put a button somewhere accept them by those names — DialogTrigger({ variant: "destructive" }) reaches the same table.

API Reference

Button

The button. `buttonVariants` is exported alongside it, which is how the parts of other components that render as buttons — a dialog trigger, a calendar's arrows — borrow the same styles. Renders a Button; extra props are forwarded onto it.

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"default"`	Which button style to render. Also set as data-variant.
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`	Height and padding. The icon sizes are square and drop the horizontal padding. Also set as data-size.

Data attribute	Value
`[data-slot]`	`"button"`
`[data-variant]`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`
`[data-size]`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`

PreviousButton Group NextCalendar