Button

Accessible button with six variants and electric-glow on the default variant.

Code

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

export default function Example() {
  return <Button>Click me</Button>
}

Installation

$npx particleui-cli add button

Usage

TSX

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

export default function Example() {
  return <Button>Click me</Button>
}

Examples

Variants

Use the variant prop to change the visual style.

TSX

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

export default function Example() {
  return (
    <div className="flex flex-wrap 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

Adjust the size with the size prop.

TSX

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

export default function Example() {
  return (
    <div className="flex items-center gap-3">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
    </div>
  )
}

Props

Prop	Type	Default	Required
asChild	boolean	—	no
variant	"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"	`"default"`	no
size	"sm" \| "default" \| "lg" \| "icon"	`"default"`	no

Details

Source filecomponents/ui/button.tsx

Typeui

Categoriesbuttons, core

npm dependencies@radix-ui/react-slot, tailwind-variants

Registry deps

Claude skill—