1

ButtonNew

A pressable trigger with spring-animated depth feedback, sound cues, and solid/outline/ghost/link variants.

Dependencies

motion@radix-ui/react-slotclass-variance-authority

Interaction Type

Press animates scale(0.97) + translateY(1px) via spring physics; hover shifts background color; sound cues on hover and click; loading state swaps content for a spinner while preserving width.

Props

Options you can pass to customize this component.

Prop
Type
Description
variant
"solid" | "outline" | "ghost" | "link"

Visual style. Defaults to "solid".

size
"sm" | "md" | "lg"

Button height and padding tier. Defaults to "md" (44px touch target).

destructive
boolean

Applies error-color styling appropriate to the current variant.

loading
boolean

Shows a spinner, preserves width, sets aria-busy and disables interaction.

asChild
boolean

Merge button styling onto the child element via the Slot pattern.

disabled
boolean

Disables the button with reduced opacity and no pointer events.

className
string

Additional CSS classes merged via cn().

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/button.json

How to use

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

export function Demo() {
  return (
    <div className="flex items-center gap-3">
      <Button>Primary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
      <Button destructive>Delete</Button>
      <Button loading>Saving…</Button>
    </div>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/button.json