Neumorphism UI

Button

Use Button for actions such as saving, opening a dialog, or changing state. Use a link for navigation to another page.

Preview

Variants and sizes

Compare primary, soft, ghost, and destructive actions alongside small, large, icon, and disabled buttons.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/button

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Start with a text label, then choose variant for emphasis and size for dimensions. Set type explicitly inside forms and give icon-only buttons an accessible name.

"use client";

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

export default function Example() {
  const [saved, setSaved] = useState(false);
  return (
    <div>
      <Button variant="primary" onClick={() => setSaved(true)}>Save changes</Button>
      <p role="status">{saved ? "Changes saved." : "Unsaved changes."}</p>
    </div>
  );
}

API Reference

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.

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.