操作与浮层@neumorphism-ui/button

Button

使用原生 button，保留表单与键盘行为。提供五种 variant 和四种 size，active 状态通过 inset shadow 表现按下效果。

@neumorphism-ui/button

Registry JSON

预览

安装

npx shadcn@latest add @neumorphism-ui/button

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

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

Example

<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 参考

组件	属性	类型	默认值	说明
`Button`	`variant`	`"default" \| "primary" \| "soft" \| "ghost" \| "destructive"`	`"default"`	选择按钮的语义和表面强调方式。
`Button`	`size`	`"sm" \| "default" \| "lg" \| "icon"`	`"default"`	选择按钮高度和水平内边距。
`Button`	`type`	`"button" \| "submit" \| "reset"`	`"button"`	决定原生按钮的行为。
`Button`	`disabled`	`boolean`	`false`	禁用点击和键盘操作。

预览

安装

用法

Import

Example

API 参考

无障碍