Alert

Overview

Alert dialogs are specialized modal interfaces designed for critical messages that require immediate user attention and response. Unlike standard modals that may contain various types of content, alerts are specifically structured to present important information and prompt for user decisions.

Key features

• Focused attention: Overlays the interface to demand immediate user acknowledgment
• Decision-oriented: Typically includes confirm/cancel actions
• Visual emphasis: Includes alert icons to communicate urgency or importance
• Non-dismissible: Requires explicit user response (backdrop clicks don't dismiss)
• Simplified structure: Streamlined design compared to general-purpose modals

How alerts work

The Alert component uses the Modal component's JavaScript functionality but with a simpler, purpose-built window structure:

• Alerts leverage the same modal overlay system but with specialized styling
• The backdrop is typically static, preventing dismissal by clicking outside
• Alert windows have dedicated header, content, and footer sections optimized for alerts
• Visual indicators (icons) communicate the alert type or severity

Basic structure

Alert dialogs consist of these key components:

• Modal Container: The outer wrapper that controls position
• Alert window: The visible alert dialogue with styling and shadow effects
• Alert icon: Visual indicator of the alert type (optional)
• Alert header: Contains the alert title
• Alert content: Contains the message or information
• Alert footer: Contains response actions (buttons)

Examples

Explore these practical examples to see Chassis CSS alert dialogs in action across a variety of use cases. Each example demonstrates different features and functionality to help you implement alerts effectively in your projects.

Basic alert dialog

Below is a static example of an alert dialog with its standard components:

<div class="modal" tabindex="-1">
  <div class="modal-container">
    <div class="alert-window">
      <svg class="icon icon-danger alert-icon">
        <use xlink:href="#exclamation-triangle-solid"/>
      </svg>
      <div class="alert-header">
        <h4 class="alert-title">Confirm Delete</h4>
      </div>
      <div class="alert-content">
        <p>Are you sure you want to delete this file? This action cannot be undone.</p>
      </div>
      <div class="alert-footer">
        <button type="button" class="button default" data-cx-dismiss="modal">Cancel</button>
        <button type="button" class="button danger">Delete File</button>
      </div>
    </div>
  </div>
</div>

Live alert demo

Click the button below to see a working alert dialog. Note how it slides down and fades in from the top of the page, and requires explicit user action to dismiss.

<!-- Button to trigger the alert -->
<button type="button" class="button primary" data-cx-toggle="modal" data-cx-target="#exampleAlert">
  Show Alert Dialog
</button>

<!-- Alert Dialog -->
<div class="modal fade" id="exampleAlert" tabindex="-1" data-cx-backdrop="static" data-cx-keyboard="false" aria-labelledby="exampleAlertLabel" aria-hidden="true" role="alertdialog">
  <div class="modal-container centered">
    <div class="alert-window">
      <svg class="icon icon-danger alert-icon">
        <use xlink:href="#exclamation-triangle-solid"/>
      </svg>
      <div class="alert-header">
        <h4 class="alert-title" id="exampleAlertLabel">Important Notice</h4>
      </div>
      <div class="alert-content">
        <p>This action will permanently remove selected data. Are you sure you want to continue?</p>
      </div>
      <div class="alert-footer">
        <button type="button" class="button default" data-cx-dismiss="modal">Cancel</button>
        <button type="button" class="button danger">Proceed</button>
      </div>
    </div>
  </div>
</div>

Sequential alerts

For complex confirmation processes, you can chain multiple alert dialogs in sequence. This example shows how to toggle between two related alerts:

<!-- Button to trigger the alert -->
<button class="button danger" data-cx-target="#exampleAlertToggle" data-cx-toggle="modal">Delete Account</button>

<!-- Alert 1 -->
<div class="modal fade" id="exampleAlertToggle" aria-hidden="true" data-cx-backdrop="static" aria-labelledby="exampleAlertToggleLabel" tabindex="-1">
  <div class="modal-container centered">
    <div class="alert-window">
      <svg class="icon icon-danger alert-icon">
        <use xlink:href="#exclamation-triangle-solid"/>
      </svg>
      <div class="alert-header">
        <h4 class="alert-title" id="exampleAlertToggleLabel">Delete Account</h4>
      </div>
      <div class="alert-content">
        <p>Are you sure you want to delete your account? This will remove all your data.</p>
      </div>
      <div class="alert-footer">
        <button type="button" class="button default" data-cx-dismiss="modal">Cancel</button>
        <button class="button danger" data-cx-target="#exampleAlertToggle2" data-cx-toggle="modal">Delete Account</button>
      </div>
    </div>
  </div>
</div>

<!-- Alert 2 -->
<div class="modal fade" id="exampleAlertToggle2" aria-hidden="true" data-cx-backdrop="static" aria-labelledby="exampleAlertToggleLabel2" tabindex="-1">
  <div class="modal-container centered">
    <div class="alert-window">
      <svg class="icon icon-danger alert-icon">
        <use xlink:href="#exclamation-triangle-solid"/>
      </svg>
      <div class="alert-header">
        <h4 class="alert-title" id="exampleAlertToggleLabel2">Final Confirmation</h4>
      </div>
      <div class="alert-content">
        <p>This action is permanent and cannot be undone. Type "<b>DELETE</b>" below to confirm:</p>
        <p><input type="text" class="form-input" placeholder="Type DELETE to confirm" /></p>
      </div>
      <div class="alert-footer">
        <button type="button" class="button default" data-cx-target="#exampleAlertToggle" data-cx-toggle="modal">Go Back</button>
        <button class="button danger" disabled>Confirm Delete</button>
      </div>
    </div>
  </div>
</div>

Use cases

Alert dialogs are appropriate for:

• Destructive actions: Confirming deletions, removals, or other irreversible operations
• Security confirmations: Verifying identity or permissions for sensitive operations
• Critical warnings: Alerting users to important consequences before proceeding
• Error notifications: Communicating problems that require acknowledgment

For less critical interactions, consider using standard modals, toasts, or inline messaging instead.

Accessibility

Alert dialogs should be properly configured for accessibility:

• Use the role="alertdialog" attribute to indicate the dialog's purpose
• Ensure proper focus management with aria-labelledby pointing to the title
• Set aria-describedby if there is a longer description
• Provide keyboard focus handling for all interactive elements

CSS

Alert dialogs use specialized CSS classes to create their distinctive appearance while leveraging the underlying modal functionality.

Alert-specific classes

• .alert-window: The container for the alert dialog (instead of .modal-window)
• .alert-header: Container for the alert title
• .alert-title: Styling for the alert heading
• .alert-content: Container for the alert message
• .alert-footer: Container for the alert buttons
• .alert-icon: Styling for the alert's indicator icon

This component can be customized using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.

Custom properties

These CSS variables control the component's appearance and can be modified dynamically on the page. Components use cascading variables, allowing seamless variations in size, color, and style without redundant style declarations through component inheritance and the context class system.

// Z-index and sizing variables
--#{$prefix}zindex: var(--#{$prefix}alert-zindex, #{$zindex-alert});
--#{$prefix}padding-y: var(--#{$prefix}alert-padding-y, #{$alert-padding-y});
--#{$prefix}padding-x: var(--#{$prefix}alert-padding-x, #{$alert-padding-x});
--#{$prefix}gap: var(--#{$prefix}alert-gap, #{$alert-gap});

// Color scheme variables
--#{$prefix}fg-color: var(--#{$prefix}alert-fg-color, #{$alert-fg-color});
--#{$prefix}bg-color: var(--#{$prefix}alert-bg-color, #{$alert-bg-color});
--#{$prefix}border-color: var(--#{$prefix}alert-border-color, #{$alert-border-color});

// Border and shape properties
--#{$prefix}border-width: var(--#{$prefix}alert-border-width, #{$alert-border-width});
--#{$prefix}border-radius: var(--#{$prefix}alert-border-radius, #{$alert-border-radius});
--#{$prefix}inner-border-radius: var(--#{$prefix}alert-inner-border-radius, #{$alert-inner-border-radius});

// Icon and typography settings
--#{$prefix}icon-size: var(--#{$prefix}alert-icon-size, #{$alert-icon-size});
@include map-font($alert-message-font, alert-message);
@include map-font($alert-title-font, alert, title);

// Spacing and shadow properties
--#{$prefix}title-margin: var(--#{$prefix}alert-title-margin, #{$alert-title-margin});
--#{$prefix}footer-gap: var(--#{$prefix}alert-footer-gap, #{$alert-footer-gap});
--#{$prefix}box-shadow: var(--#{$prefix}alert-box-shadow, #{$alert-shadow});

--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
--#{$prefix}backdrop-color: #{$modal-backdrop-color};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Sass variables

These Sass variables are also exposed as CSS custom properties using the --cx- prefix. A Sass variable $variable-name becomes available as --cx-variable-name in CSS, allowing for styles to be modified dynamically on the page. See the context components page for more details.

$alert-padding-y:               var(--#{$prefix}space-large);
$alert-padding-x:               var(--#{$prefix}space-large);
$alert-gap:                     var(--#{$prefix}space-medium);

$alert-border-radius:           var(--#{$prefix}border-radius-large);
$alert-border-width:            var(--#{$prefix}border-width-medium);

$alert-fg-color:                $modal-window-fg-color;
$alert-bg-color:                $modal-window-bg-color;
$alert-border-color:            $modal-window-border-color;
$alert-border-width:            $modal-window-border-width;
$alert-border-radius:           $modal-window-border-radius;
$alert-inner-border-radius:     $modal-window-inner-border-radius;
$alert-footer-gap:              $modal-footer-gap;
$alert-shadow:                  $modal-window-shadow-xsmall;

$alert-title-font:              $cx-font-text-large-strong;
$alert-message-font:            $cx-font-text-medium-normal;
$alert-title-margin:            $space-xsmall;
$alert-icon-size:               $cx-size-icon-glyph-2xlarge;

$alert-fade-transform:          translateY(-25%);
$alert-show-transform:          none;
$alert-scale-transform:         scale(1.02);
$alert-transition:              transform .3s ease-out;

See modal page for backdrop and transition variables that also apply to alert dialogs.

JavaScript

Alerts use the same JavaScript functionality as modals, providing a consistent API for controlling dialog behavior. This consistency makes it easy to implement and manage alert dialogs within your application. See modal documentation for more details.