Neumorphism UI
アクションとオーバーレイ@neumorphism-ui/button

Button

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

@neumorphism-ui/button
Registry JSON

プレビュー

インストール

インストール: buttonnpx shadcn@latest add @neumorphism-ui/button

CLI が npm 依存関係、base token、utils、コンポーネントソースを順番に処理します。

この Registry を初めて使う場合は、先に namespace の設定 を完了してください。

使い方

Import

Button の import コード
import { Button } from "@/components/ui/button"

Example

Button の使用コード
<div className="flex gap-3">
  <Button variant="primary">変更を保存</Button>
  <Button variant="soft">キャンセル</Button>
  <Button variant="ghost">あとで</Button>
  <Button size="icon" aria-label="項目を追加">+</Button>
</div>

API リファレンス

コンポーネントプロパティ型デフォルト説明
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 を使用してください。