Alert

How to use it

Use to report a problem the user should deal with now, such as a failed payment, above the content it concerns. Insert it into the page at the moment the problem happens -- an alert that is already there at page load may not be announced -- and say in one or two sentences what went wrong and what to do next. Let people dismiss it once read; for a calm confirmation use the toast notification instead.

Accessibility

role="alert" makes screen readers announce the message as soon as it is inserted, interrupting what they were reading, so keep it for problems that need attention. The dismiss control is a native <button> with aria-label="Dismiss alert", because the visible × alone would be read as a letter. Dismissing sets the hidden attribute, and .dcl-alert[hidden] keeps it hidden despite the flex layout. Dark red text (#7f1d1d) on the pale red background (#fef2f2) is about 9:1, also while hovered or focused.

Source (copy-ready)

Copy code

<div class="dcl-alert" role="alert">
  <p class="dcl-alert__text"><strong>Payment failed.</strong> Your card was declined. Update your payment method to keep your plan.</p>
  <button type="button" class="dcl-alert__close" aria-label="Dismiss alert">&times;</button>
</div>
<style>
.dcl-alert { display: flex; align-items: flex-start; gap: 0.75rem; max-width: 36rem; padding: 0.75rem 1rem; border: 1px solid #fca5a5; border-left: 4px solid #b91c1c; border-radius: 0.375rem; font: inherit; color: #7f1d1d; background-color: #fef2f2; }
.dcl-alert[hidden] { display: none; }
.dcl-alert__text { margin: 0; flex: 1; color: #7f1d1d; background-color: #fef2f2; }
.dcl-alert__close { border: none; padding: 0 0.375rem; font: inherit; font-size: 1.25rem; line-height: 1.5rem; cursor: pointer; border-radius: 0.25rem; color: #7f1d1d; background-color: #fef2f2; }
.dcl-alert__close:hover { color: #7f1d1d; background-color: #fee2e2; }
.dcl-alert__close:focus-visible { outline: 2px solid #7f1d1d; outline-offset: 2px; }
</style>
<script>
(function () {
  document.querySelectorAll(".dcl-alert__close").forEach(function (button) {
    if (button.dataset.dclBound) {
      return;
    }
    button.dataset.dclBound = "true";
    button.addEventListener("click", function () {
      button.closest(".dcl-alert").hidden = true;
    });
  });
})();
</script>