Neumorphism UI
Actions & overlays@neumorphism-ui/button

Button

Uses a native button to preserve form behavior and keyboard interaction. Provides five variants and four sizes, with an inset shadow representing the pressed state.

@neumorphism-ui/button
Registry JSON

Preview

Installation

Installation: buttonnpx shadcn@latest add @neumorphism-ui/button

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

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

Example

Button usage code
<div className="flex gap-3">
  <Button variant="primary">Save changes</Button>
  <Button variant="soft">Cancel</Button>
  <Button variant="ghost">Later</Button>
  <Button size="icon" aria-label="Add item">+</Button>
</div>

API Reference

ComponentPropTypeDefaultDescription
Buttonvariant"default" | "primary" | "soft" | "ghost" | "destructive""default"Selects the button meaning and degree of surface emphasis.
Buttonsize"sm" | "default" | "lg" | "icon""default"Selects the height and horizontal padding.
Buttontype"button" | "submit" | "reset""button"Determines the native button behavior.
ButtondisabledbooleanfalseDisables pointer and keyboard interaction.

Accessibility

  • 01

    Because it uses a native button, Space and Enter behavior and disabled semantics are preserved.

  • 02

    Always provide an aria-label that describes the action of an icon-size button.

  • 03

    For navigation, use a semantic anchor or Link instead of a Button click handler.