Button

A plain button element with the shadcn look. No wrapper, no runtime — the platform has had this one covered since 1995.

plain CSS — works everywhere

PreviewCode

<button class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-medium whitespace-nowrap text-primary-foreground transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50">
  Save changes
</button>

<button class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg border border-input bg-transparent px-4 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50">
  Cancel
</button>

<button class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg px-4 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50">
  Ghost
</button>

<button class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg bg-destructive px-4 text-sm font-medium whitespace-nowrap text-white transition-opacity hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-destructive disabled:pointer-events-none disabled:opacity-50">
  Delete
</button>

How it works

It’s a <button>. Copy the variant you need and change the label.
focus-visible:outline-* gives a visible keyboard focus ring without flashing on mouse clicks.
disabled:* utilities handle the disabled state — add the disabled attribute and you’re done.
Tailwind v4 no longer forces cursor: pointer on buttons, so the class sets it explicitly.
Inside a <form>, a bare <button> defaults to type="submit" — add type="button" to anything that isn’t the submit action. The library’s own menu and toolbar demos do this.

Variants

Primary, outline, ghost and destructive are just different utility sets on the same element — there is no variant prop because there are no props.