Icon Transition Toggle
アイコン切り替え時に滑らかなトランジションを持つトグルボタン。opacity、blur、scaleを組み合わせた自然なアニメーションです。
npx shadcn@latest add https://imaimai-ui.vercel.app/r/icon-transition-toggle.json実際に動作するコンポーネントです。インタラクションを試してみてください。
比較
blur + scale + opacity を組み合わせることで、滑らかで自然なトランジションを実現。アニメーションなしと比較してみてください。
blur + scale + opacity
アニメーションなし
Variants
shadcn/ui Button の全ての variant に対応。default、destructive、outline（デフォルト）、secondary、ghost が使用できます。
default
destructive
outline (default)
secondary
ghost
Sizes
size props でボタンとアイコンのサイズを自動調整。sm（32px, icon 12px）、default（36px, icon 16px）、lg（48px, icon 20px）の3つのサイズが使用できます。
sm
default
lg
Tooltip
tooltip と toggledTooltip props でホバー時のツールチップを設定。トグル状態に応じて異なるテキストを表示できます。
Auto Reset
autoResetTimeout props を指定すると、トグル後に自動的に元の状態に戻ります。0.5秒後に自動でリセットされる例です。
