Neumorphism UI

Toggle

用于固定或格式设置等需要保持按下状态的按钮。

预览

固定按钮状态

比较图标文字按钮、初始按下的按钮和禁用按钮。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/toggle

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

提供明确名称，使用 defaultPressed 或受控 pressed。多个相关按下选项可用 ToggleGroup 组合。

"use client";

import { Toggle } from "@/components/ui/toggle";

export default function Example() {
  return <Toggle aria-label="Bold">Bold</Toggle>;
}

API 参考

保持按下选择状态的独立切换按钮。 为纯图标按钮提供标签。通过内凹表面和边框辅助表示选择，而非只用颜色。

组件属性类型默认值说明
Togglepressed / defaultPressedboolean—设置受控状态或初始状态。
Togglesize"sm" | "default" | "lg"—选择控件尺寸。
Toggledisabledboolean—禁用用户操作。

无障碍

  • 01

    为纯图标按钮提供标签。通过内凹表面和边框辅助表示选择，而非只用颜色。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。