Neumorphism UI

Button

保存、ダイアログの表示、状態の変更などの操作に使います。別ページへの移動にはリンクを使います。

プレビュー

種類とサイズ

primary、soft、ghost、destructive と、小・大・アイコン・無効状態のボタンを比較します。

インストール

この Registry を初めて使う場合は、先に 基本設定と共通スタイルの導入 を完了してください。

npx shadcn@latest add @neumorphism-ui/button

共有 base を一度導入した後、CLI でコンポーネントと依存関係を追加します。

Registry JSON

使い方

明確なテキストを入れ、variant で強調度、size で大きさを選びます。フォーム内では type を明示し、アイコンのみのボタンにも名前を付けます。

"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 リファレンス

native button を使用して form の動作とキーボード操作を維持します。5つの variant と4つの size を提供し、pressed 状態を inset shadow で表現します。

コンポーネントプロパティ型デフォルト説明
Buttonvariant"default" | "primary" | "soft" | "ghost" | "destructive""default"button の意味とサーフェス上の強調度を選択します。
Buttonsize"sm" | "default" | "lg" | "icon""default"高さと左右の padding を選択します。
Buttontype"button" | "submit" | "reset""button"native button の動作を決定します。
Buttondisabledbooleanfalseポインターとキーボードによる操作を無効にします。

アクセシビリティ

  • 01

    native button を使用するため、Space と Enter の動作、および disabled semantics が維持されます。

  • 02

    icon size の button には、その操作内容を説明する aria-label を必ず指定してください。

  • 03

    ナビゲーションには Button の click handler ではなく、semantic な anchor または Link を使用してください。