トグルToggleExperimental
押下状態を持つ単体のオン/オフボタンです。
プレビュー
状態とバリエーション
標準
単体のオン/オフ操作に使います。アイコンだけならツールチップを併用します。
選択中
選択中は背景色と文字色を反転し、オンになっていることを明確に示します。
アウトライン
ツールバー上で境界を見せたい場合に使います。
サイズ
配置するツールバーや密度に合わせて、sm / default / lg を使い分けます。
無効化
操作できない状態でもボタンの形は保ち、ツールチップで理由を補足します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| variant | 'default' | 'outline' | 'default' | 見た目の種類です。枠線を見せたい時は outline を使います。 |
| size | 'default' | 'sm' | 'lg' | 'default' | トグルボタンのサイズです。 |
| pressed / defaultPressed | boolean | - | オン状態を制御、または初期値として指定します。 |
| onPressedChange | (pressed: boolean) => void | - | オン/オフが変わった時に呼ばれます。 |
| disabled | boolean | false | 操作できない状態にします。理由が必要な場合はツールチップで補足します。 |
| aria-label | string | - | アイコンだけのトグルには必ず操作名を付けます。 |
使い方
import { Toggle } from "@gunjo/ui";
import { IconBold } from "@tabler/icons-react";
<Toggle aria-label="太字を切り替え">
<IconBold className="h-4 w-4" />
</Toggle>使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。