成功・エラーアラート
状態 ／ パターン集トップ
結果をページ上部で伝える。色に加えて見出し文で意味を区別
プレビュー#
コピーする#
上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。
<div class="alert alert--success" role="status">
<strong>保存しました</strong>
<p>変更はすぐに反映されます。</p>
</div>
<div class="alert alert--error" role="alert">
<strong>送信できませんでした</strong>
<p>接続を確認して、もう一度お試しください。</p>
</div>.alert {
padding: var(--space-4);
border-inline-start: 4px solid var(--color-border);
background: var(--color-surface);
margin-block-end: var(--space-4);
}
.alert strong {
display: block;
margin-block-end: var(--space-2);
font-size: var(--text-base);
}
/* 色を混ぜた面の上では muted が 4.5:1 に届かない（明るい表示で 4.12 と 4.04）。
補助文は地の文字色で書く（13.34 と 13.06） */
.alert p {
margin: 0;
color: var(--color-text);
font-size: var(--text-sm);
}
.alert--success {
border-inline-start-color: var(--color-accent-text);
background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}
.alert--error {
border-inline-start-color: var(--color-danger);
background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
}確認する#
- 成功は role="status"、エラーは role="alert"
- 色だけで成功/失敗を区別していない
- 自動消去するならフォーカスを奪わない
- 補助文を色を混ぜたあとの面で測って4.5:1以上ある