7onicDESIGN SYSTEM

Toggle

Toggleは、オン/オフの2つの状態を切り替えるボタンです。単独で使用するか、ToggleGroupでグループ化して使用します。

4
Variants
5
Sizes
on/off
States
Radix
Base

Playground

プレビュー
defaultD
Variant
Size
Radius
Icon
Label
Weight
State
const [starred, setStarred] = useState(false)

<Toggle
  pressed={starred}
  onPressedChange={setStarred}
  iconOnly
  aria-label={starred ? "Unstar" : "Star"}
>
  <Star
    className={`transition-colors ${
      starred ? "fill-yellow-500 text-yellow-500" : ""
    }`}
  />
</Toggle>

Variants

Default
背景変化ありのシンプルなスタイル。ツールバーやコンパクトなUIに最適。
Outline
ボーダー付きのスタイル。状態が明確に見える必要がある場合に使用。
Ghost
背景変化なし。アイコンの色/塗りつぶしのみで状態を表現。いいねボタン等に最適。
Outline Ghost
ボーダーあり + 背景変化なし。ボーダーで境界を明確にしつつ、アイコン色のみで状態表現。

Sizes

Icon Only (iconOnly=true)

xs
サイズ28px × 28px
アイコン14px
sm
サイズ32px × 32px
アイコン16px
md
サイズ36px × 36px
アイコン16px
default
サイズ40px × 40px
アイコン20px
lg
サイズ48px × 48px
アイコン24px

Icon + Text (iconOnly=false)

xs
高さ28px
横パディング10px
Gap4px
アイコン14px
フォント12px
sm
高さ32px
横パディング12px
Gap8px
アイコン14px
フォント13px
md
高さ36px
横パディング14px
Gap8px
アイコン16px
フォント14px
default
高さ40px
横パディング16px
Gap8px
アイコン16px
フォント14px
lg
高さ48px
横パディング24px
Gap8px
アイコン16px
フォント16px

States

Off
On
Disabled
Disabled On
<Toggle iconOnly variant="outline" aria-label="Off"><Star className="icon-xl" /></Toggle>
<Toggle iconOnly variant="outline" defaultPressed aria-label="On"><Star className="icon-xl fill-yellow-500 text-yellow-500" /></Toggle>
<Toggle iconOnly variant="outline" disabled aria-label="Disabled"><Star className="icon-xl" /></Toggle>
<Toggle iconOnly variant="outline" disabled defaultPressed aria-label="Disabled on"><Star className="icon-xl fill-yellow-500 text-yellow-500" /></Toggle>

API

Props

pressedundefined
boolean

制御モードでのオン/オフ状態

defaultPressedfalse
boolean

非制御モードでの初期状態

onPressedChangeundefined
(pressed: boolean) => void

状態変更時のコールバック

variant"default"
"default" | "outline" | "ghost" | "outline-ghost"

トグルの視覚スタイル。ghost/outline-ghostは背景変化なし（アイコン色のみ変更用）

size"default"
"xs" | "sm" | "md" | "default" | "lg"

トグルのサイズ (28/32/36/40/48px)

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

角丸のサイズ (6px)

fontWeight"normal"
"normal" | "semibold"

フォント太さ。normal=400、semibold=600

iconOnlyundefined
boolean

アイコンのみモード。正方形でIconButtonと同じサイズ規則を適用

pressEffectundefined
boolean

プレスエフェクト（active:scale-pressed）。未指定時はtrueとして動作。falseで無効化

disabledfalse
boolean

無効状態

asChildfalse
boolean

Slotとしてレンダリング

Anatomy

1
2
3
Favorite
statedata-[state=on/off]
1
Container
トグルボタン本体
2
Icon
オプション
3
Label
オプション

Best Practices

✓

推奨

  • ✓明確なオン/オフ状態を視覚的に示す
  • ✓aria-labelで目的を説明する
  • ✓即時に効果が反映される操作に使用
  • ✓複数のトグルはToggleGroupでグループ化
✕

避けるべき

  • ✗送信が必要なフォーム項目に使用しない
  • ✗状態が分かりにくいアイコンを使用しない
  • ✗aria-labelなしで使用しない
  • ✗排他的選択にはSegmentedを使用

Accessibility

キーボード操作

Spaceトグル切替
Enterトグル切替

ARIA属性

  • aria-pressed 自動付与
  • data-state on/off
  • フォーカスインジケーター
  • aria-label 推奨