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

閉じるボタン付き角丸トースト

右端に×ボタンを備えた角丸トーストの静止見本。ユーザー自身で通知を閉じられるUIパターンの見た目確認に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="toast09-14-08">
          <span>設定を更新しました</span>
          <span class="close09-14-08">×</span>
        </div>

CSS

.d09-14-08{
          background:#f8fafc;
        }
        .d09-14-08 .toast09-14-08{
          position:absolute;
          left:50%;
          bottom:20px;
          transform:translateX(-50%);
          display:flex;
          align-items:center;
          gap:18px;
          padding:11px 12px 11px 18px;
          background:#fff;
          border-radius:999px;
          font-family:sans-serif;
          font-size:12.5px;
          color:#1e293b;
          white-space:nowrap;
          box-shadow:0 8px 20px rgba(15,23,42,.18);
        }
        .d09-14-08 .close09-14-08{
          flex-shrink:0;
          width:22px;
          height:22px;
          border-radius:50%;
          background:#f1f5f9;
          display:flex;
          align-items:center;
          justify-content:center;
          font-size:14px;
          color:#64748b;
        }

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