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 を変更する際もラベルと可視フォーカスを保ちます。