Something new is coming.Join the waitlist

Button

PreviousNext

A polymorphic button primitive with six variants and four sizes, built on Radix Slot and class-variance-authority.

Playground

Pick a variant and size, toggle disabled, and edit the children. The snippet below the preview matches the rendered button exactly.

<Button>Click me</Button>

Props

Installation

npx shadcn@latest add https://tentui.com/r/button.json

Usage

import { Button } from "@/components/ui/button";
 
export function Example() {
  return <Button>Click me</Button>;
}

Props

PropTypeDefaultDescription
variant"default" | "secondary" | "outline" | "ghost" | "destructive" | "link""default"Visual treatment.
size"default" | "sm" | "lg" | "icon""default"Sizing token. Use icon when the children are a single glyph.
asChildbooleanfalseRender the children as the styled element instead of a <button> (Radix Slot).
disabledbooleanfalseDisables pointer events and dims the button.
classNamestring—Forwarded to the rendered element. Use to extend or override the default styles.

All other native <button> attributes are forwarded.

Polymorphism with asChild

Wrap any element — usually next/link — and the button styles transfer onto it without nesting an interactive element inside another.

import Link from "next/link";
 
import { Button } from "@/components/ui/button";
 
export function CTA() {
  return (
    <Button asChild>
      <Link href="/get-started">Get started</Link>
    </Button>
  );
}