Button

An animated button component with multiple variants and sizes.

Loading component...

Installation

Install using the CLI:

bash

bunx knot-ui add button

Or copy the source code manually from the Code tab above.

Usage

bash

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

export default function Example() {
  return (
    <div className="flex gap-4">
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  );
}

Props

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "outline" \| "ghost" \| "destructive"	"default"	The button style variant
size	"sm" \| "md" \| "lg" \| "icon"	"md"	The button size
asChild	boolean	false	Render as child element