フィードバック

解剖

• Alert

  title、説明、iconをrole alertの同じ面で伝える。

• Badge

  短い状態をpillで示し、本文や操作の代わりにしない。

• Skeleton

  読み込み後の形を保ち、レイアウト移動を抑える。

• Dialog

  overlay、title、description、footer、closeをportalで提供する。

状態

• 通常通知

  完了内容と反映先を文章で示す。

• destructive

  問題、影響、修正行動を赤と文章で示す。

• loading

  最終レイアウトに近いSkeletonを表示する。

• dialog open

  背景操作を遮断し、Esc、close、footer操作で閉じる。

仕様値

Alert

rounded-lg、px 16 / py 12px、role alert

Badge

pill、12px、4 variants

Dialog overlay

fixed、black 50%、z 9999

Dialog面

max 85svh、SP width calc(100%-32px)、sm max 512px

Skeleton

bg-muted、animate-pulse

閉じる操作

40px円形button、sr-only label