KARAKURIDESIGN SYSTEM

Toggle

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

4
Variants
5
Sizes
on/off
States
Radix
Base

Playground

Preview
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
ボーダー付きのスタイル。Statesが明確に見える必要がある場合に使用。
Ghost
背景変化なし。アイコンの色/塗りつぶしのみでStatesを表現。いいねボタン等に最適。
Outline Ghost
ボーダーあり + 背景変化なし。ボーダーで境界を明確にしつつ、アイコン色のみでStates表現。

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

API

Props

pressedundefined
boolean

制御モードでのオン/オフStates

defaultPressedfalse
boolean

非制御モードでの初期States

onPressedChangeundefined
(pressed: boolean) => void

States変更時のコールバック

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

無効States

asChildfalse
boolean

Slotとしてレンダリング