トグルToggleExperimental

押下状態を持つ単体のオン/オフボタンです。

プレビュー

状態とバリエーション

標準

単体のオン/オフ操作に使います。アイコンだけならツールチップを併用します。

選択中

選択中は背景色と文字色を反転し、オンになっていることを明確に示します。

アウトライン

ツールバー上で境界を見せたい場合に使います。

サイズ

配置するツールバーや密度に合わせて、sm / default / lg を使い分けます。

無効化

操作できない状態でもボタンの形は保ち、ツールチップで理由を補足します。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
variant'default' | 'outline''default'見た目の種類です。枠線を見せたい時は outline を使います。
size'default' | 'sm' | 'lg''default'トグルボタンのサイズです。
pressed / defaultPressedboolean-オン状態を制御、または初期値として指定します。
onPressedChange(pressed: boolean) => void-オン/オフが変わった時に呼ばれます。
disabledbooleanfalse操作できない状態にします。理由が必要な場合はツールチップで補足します。
aria-labelstring-アイコンだけのトグルには必ず操作名を付けます。

使い方

import { Toggle } from "@gunjo/ui";
import { IconBold } from "@tabler/icons-react";

export function BoldToggle() {
  return (
    <Toggle aria-label="太字を切り替え">
      <IconBold className="h-4 w-4" />
    </Toggle>
  );
}

設計の判断

  • 入りは色だけでなく、地と字の両方を入れ替える。資料は「押されている状態の見分けが色の変化だけでは伝わらない」を崩れた形に挙げています。GUNJO は入りのとき、背景を primary、文字を primary-foreground にします。地と字がまとめて反転するので、薄い色の差ではなく面として分かります。資料が求める aria-pressed は土台の Radix が付けます。
  • 押せない状態でも、入りか切りかは残す。ふつう使えない状態は全体を薄くしますが、それだと入りのトグルが「押せない」と「切り」の見分けが付かなくなります。GUNJO は使えないときの透明度を戻したうえで、入りのままなら primary-subtle の淡い塗りを残し、切りのときは枠線と muted の地にします。
  • 見た目は2つだけにした。variant は地の無いものと枠線のあるものの2つ、size は3つです。1つだけ置くトグルは周りに馴染ませ、並べて使うときは ToggleGroup に移る、という切り分けにしてあるので、単体のトグルに区切りや連結の見た目を増やしていません。

使用コンポーネント

ToggleTooltip

関連コンポーネント

ToggleGroupTooltipButtonButton

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Toggle