Button

A button, with every variant and size you need — nothing you don’t.

import { Button } from '@/components/ui/button'

export default function ButtonDemo() {
  return <Button>Button</Button>
}

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/button.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Button imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import { Button } from '@/components/ui/button'

<Button>Button</Button>

Examples

Variants

import { Button } from '@/components/ui/button'

export default function ButtonVariants() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

Sizes

import { Button } from '@/components/ui/button'

export default function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon" aria-label="Icon button">
        +
      </Button>
    </div>
  )
}

API Reference

Name	Type	Default	Description
variant	'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'	'default'	Visual style of the button.
size	'sm' \| 'default' \| 'lg' \| 'icon'	'default'	Size of the button.
asChild	boolean	false	Merge the button’s classes and props onto a single child element instead of rendering a <button>.
...props	React.ButtonHTMLAttributes<HTMLButtonElement>	—	Every native button attribute (onClick, disabled, type, etc.).