Alert

Material Design 3 alert components for displaying important messages and notifications

Alert

Alerts provide important messages to users in a visually prominent way. They communicate information about system status, user actions, or other contextual messages.

Basic Usage

Basic Alert

This is a basic alert message.

Alert Types

Info (Default)

Info Alert

This is an informational message.

Success

Success Alert

Your action was completed successfully!

Warning

Warning Alert

Please review this warning before proceeding.

Error

Error Alert

An error occurred. Please try again.

Style Variants

Tonal (Default)

Tonal alerts use a subtle background color:

Tonal Alerts

Tonal info alert

Tonal success alert

Filled

Filled alerts have a solid background:

Filled Alerts

Filled info alert

Filled warning alert

Outlined

Outlined alerts have a border:

Outlined Alerts

Outlined success alert

Outlined error alert

Standard

Standard alerts are minimal with just an icon and text:

Standard Alert

Standard info alert

Alert Structure

Complete Alert

A full-featured alert with all components:

Complete Alert Structure

Information

This alert contains important information that you should be aware of.

With Icon

Alert with Icon

Your changes have been saved successfully.

With Title and Description

Alert with Title and Description

Storage Limit Reached

You've used 95% of your available storage. Consider upgrading your plan or deleting old files.

With Actions

Alert with Actions

Payment Failed

We couldn't process your payment. Please update your payment method.

With Close Button

Alert with Close Button

You have 3 unread notifications.

Density

Compact

Compact Alert

Compact alert with reduced padding.

Comfortable

Comfortable Alert

Success!

Comfortable alert with increased padding.

Icon Examples

Common Alert Icons

Common Alert Icons

Use Cases

Form Validation

Form Validation Alert

Validation Errors

  • Email is required
  • Password must be at least 8 characters

System Status

System Status Alert

Scheduled Maintenance

Our service will be offline for maintenance on Sunday, Oct 30 from 2:00 AM to 4:00 AM EST.

Action Confirmation

Action Confirmation Alert

Email sent successfully to john@example.com

Feature Announcement

Feature Announcement Alert

New Feature: Dark Mode

Check out our new dark mode! Toggle it in your settings.

Best Practices

Use Appropriate Types

Match alert types to the message intent:

  • Info: General information, tips, announcements
  • Success: Confirmations, completions, positive outcomes
  • Warning: Cautions, potential issues, important notices
  • Error: Failures, errors, critical problems

Be Concise

Keep alert messages brief and actionable:

Good Alert Example

Upload Failed

File size exceeds 10MB limit.

We encountered an issue while attempting to upload your file to our servers. The file you selected appears to be larger than the maximum allowed file size...

Provide Actions

When possible, offer next steps:

Alert with Next Steps

Session Expiring Soon

Your session will expire in 5 minutes.

Accessibility

  • Use proper ARIA roles and labels
  • Ensure sufficient color contrast
  • Provide descriptive close button labels
  • Use semantic HTML

Accessible Alert

Framework Examples

React with Dismiss

import { useState } from 'react';

interface AlertProps {
  type?: 'info' | 'success' | 'warning' | 'error';
  variant?: 'tonal' | 'filled' | 'outlined' | 'standard';
  title?: string;
  children: React.ReactNode;
  dismissible?: boolean;
}

export function Alert({ type = 'info', variant = 'tonal', title, children, dismissible = false }: AlertProps) {
  const [isVisible, setIsVisible] = useState(true);

  if (!isVisible) return null;

  return (
    <div className={`alert alert-${variant} alert-${type}`} role="alert">
      <div className="alert-content">
        {title && <h4 className="alert-title">{title}</h4>}
        <div className="alert-description">{children}</div>
      </div>
      {dismissible && (
        <button
          className="alert-close"
          onClick={() => setIsVisible(false)}
          aria-label="Close alert"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      )}
    </div>
  );
}

// Usage
<Alert type="success" title="Success" dismissible>
  Your changes have been saved.
</Alert>

API Reference

Class Names

ClassDescription
.alertBase alert styles (required)
.alert-infoInfo type (blue)
.alert-successSuccess type (green)
.alert-warningWarning type (yellow)
.alert-errorError type (red)
.alert-tonalTonal variant (default)
.alert-filledFilled variant
.alert-outlinedOutlined variant
.alert-standardStandard variant
.alert-compactReduced padding
.alert-comfortableIncreased padding
.alert-iconIcon container
.alert-contentContent container
.alert-titleAlert title
.alert-descriptionAlert description
.alert-actionsAction buttons container
.alert-closeClose button
  • Badge - Status indicators
  • Button - Action buttons
  • Card - Container components

See Also