Button | nexvyn/ui

"use client"

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

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

Installation

pnpm dlx shadcn@latest add https://ui.nexvyn.dev/r/styles/new-york-v4/button.json

Install dependencies:

npm install @radix-ui/react-slot class-variance-authority

Copy the component:

Update imports to match your project structure.

Usage

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

<Button variant="outline">Button</Button>

Variants

Default

<Button>Default Button</Button>

Secondary

<Button variant="secondary">Secondary</Button>

Destructive

<Button variant="destructive">Destructive</Button>

Outline

<Button variant="outline">Outline</Button>

Ghost

<Button variant="ghost">Ghost</Button>

Link

<Button variant="link">Link</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">
  <IconPlus />
</Button>