Button

The Button primitive is a thin wrapper around a native <button> that applies the shared shadcn class graph via class-variance-authority. It supports six visual variants and a range of sizes.

The preview below imports the component directly from apps/editor-web/src/components/ui/button — the same source the application ships.

Usage

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

export function Example() {
  return (
    <Button variant="secondary" size="sm">
      Click me
    </Button>
  );
}

Variants

default, secondary, outline, ghost, destructive, link.

Sizes

xs, sm, default, lg, plus the icon-only sizes icon, icon-xs, icon-sm, icon-lg.