组件

Toggle

用于单个开关按钮和工具栏状态按钮

Toggle

Toggle 适合单个状态切换按钮。

导入

import { Toggle } from "@downcity/ui";

最小示例

import { Toggle } from "@downcity/ui";
import { BoldIcon } from "lucide-react";

export function BoldToggle() {
  return (
    <Toggle aria-label="切换粗体">
      <BoldIcon />
    </Toggle>
  );
}

变体

  • default
  • outline

尺寸

  • default
  • sm
  • lg

使用建议

  • 单个开关用 Toggle
  • 多个并列选项用 ToggleGroup
  • 工具栏中通常配合图标一起使用

相关导出

  • Toggle
  • toggleVariants

继续阅读