パーツ番号 09-14-02 ・ CSSのみ

アクションボタン付きトースト

「元に戻す」ボタンを併記したトースト通知の静止見本。削除やアーカイブ操作の直後に取り消し導線を見せたい場面に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="toast09-14-02">
          <span class="msg09-14-02">ファイルを削除しました</span>
          <span class="act09-14-02">元に戻す</span>
        </div>

CSS

.d09-14-02{
          background:#f8fafc;
        }
        .d09-14-02 .toast09-14-02{
          position:absolute;
          left:50%;
          bottom:20px;
          transform:translateX(-50%);
          display:flex;
          align-items:center;
          gap:16px;
          padding:12px 14px 12px 18px;
          background:#0f172a;
          border-radius:8px;
          font-family:sans-serif;
          white-space:nowrap;
          box-shadow:0 10px 24px rgba(15,23,42,.3);
        }
        .d09-14-02 .msg09-14-02{
          font-size:13px;
          color:#f1f5f9;
        }
        .d09-14-02 .act09-14-02{
          font-size:12.5px;
          font-weight:700;
          color:#7dd3fc;
        }

クラス名 .d09-14-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。