Alerts

Inline alerts for persistent page feedback, plus a blocking alert dialog overlay for critical decisions. Styles live in scss/components/_alert.scss. General task dialogs use Modals; transient toasts use Snackbar; layout cards use Cards.

Semantic variants

Four semantic surfaces: alert--information, alert--success, alert--warning, alert--error. Pair with role="status" (information, success) or role="alert" (warning, error).

With or without icon

Add .alert--with-icon and an .alert__icon slot (decorative, aria-hidden="true"). Text-only alerts omit the icon column.

<div class="alert alert--information alert--with-icon" role="status">
  <span class="alert__icon" aria-hidden="true"></span>
  <div class="alert__content">
    <p class="alert__title">Information</p>
    <p class="alert__body">Message text.</p>
  </div>
</div>

Dismissible alerts

Add .alert--dismissible and .alert__close. Wire with data-alerts-live (see Behavior) or your own handler that sets hidden on the root.

Auto-dismiss

Optional data-alert-auto-dismiss="6000" (milliseconds) removes the alert after a delay. Always keep a close button for users who need more time.

Responsive layout

Alerts are fluid (width: 100%). In narrow columns, dismissible alerts with icons wrap the close control to preserve touch targets (44px).

Alert dialog (overlay)

Blocking overlay for critical messages: .alert-dialog + role="alertdialog", aria-modal="true", backdrop dismiss, Escape, and footer actions. Open with data-alert-dialog-open targeting the dialog id.

<div class="alert-dialog" id="confirm-delete" data-alert-dialog-live="" hidden="">
  <div class="alert-dialog__backdrop" data-alert-dialog-dismiss=""></div>
  <div class="alert-dialog__panel" role="alertdialog" aria-modal="true" aria-labelledby="confirm-title">
    <div class="alert alert--error alert--with-icon" role="alert">…</div>
    <footer class="alert-dialog__footer"><button type="button" class="btn btn--outline" data-alert-dialog-close="">Cancel</button><button type="button" class="btn btn--primary">Delete</button></footer>
  </div>
</div>

Behavior in your app

Copy docs-site/src/lib/alert-behavior.ts and call wireAllAlerts() after load. This site wires it from doc-client.ts for data-alerts-live and data-alert-dialog-live.

import { wireAllAlerts } from './alert-behavior';

document.addEventListener('DOMContentLoaded', () => wireAllAlerts());

Class reference

Customize (Sass)

1. 01

   Alert spacing and dialog width

   Override tokens before importing PimentCSS.
   variables

   @use "pimentcss-design-system" with (
     $alert-icon-size: 1.25rem,
     $alert-dialog-max-width: 32rem
   );

2. 02

   Rebuild CSS

   Run after editing _alert.scss.
   Terminal

   npm run build:css

Accessibility (RGAA / WCAG)

Next steps