Button

Installation

bunx --bun harukit@latest add button

npx harukit@latest add button

pnpm dlx harukit@latest add button

yarn dlx harukit@latest add button

Example

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

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap gap-4">
      <Button>Default</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  )
}

Usage

Import

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

Code

<Button>Click me</Button>

API Reference

Button

The main button component.

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

Props

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"default"`	The visual style of the button.
`size`	`"default" \| "sm" \| "lg" \| "icon"`	`"default"`	The size of the button.
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child, merging their props and behavior.
`disabled`	`boolean`	`false`	When `true`, prevents the user from interacting with the button.

Button

On this page