Alert

feedback

Prominent message box for displaying important information to users. Four variants (error, success, warning, info) with distinct color schemes and optional title. Includes ARIA role="alert" for accessibility.

@launch/ui

Live Preview

Variants

Error Alert

Display critical errors that require user attention

There was an error processing your request. Please try again.

Success Alert

Confirm successful actions or operations

Your changes have been saved successfully!

Warning Alert

Alert users to potential issues or important information

Please review your information before continuing.

Info Alert

Provide helpful information or tips

You can update your preferences at any time from the settings page.

With Titles

Error with Title

Include a title for additional context

Error

Unable to save changes. Please check your connection and try again.

Success with Title

Emphasize successful completion with a title

Success!

Your account has been created. Check your email for verification.

Warning with Title

Add urgency to warning messages

Warning

Your subscription will expire in 7 days. Renew now to avoid interruption.

Info with Title

Provide contextual tips with titles

Pro Tip

Use keyboard shortcuts to navigate faster. Press ? to see all available shortcuts.

Content

Long Content

Alerts handle longer messages gracefully

System Maintenance

We will be performing scheduled maintenance on our servers from 2:00 AM to 4:00 AM EST on Saturday. During this time, some services may be temporarily unavailable. We apologize for any inconvenience this may cause and appreciate your patience. For urgent matters, please contact our support team.

Multiple Alerts

Display multiple alerts with different variants

Profile updated

Invalid email address

Unsaved changes

New features available

Usage Guidance

✓ When to Use

Use for important user feedback: form-level errors, success confirmations, warnings about consequences, informational notices. Best placed at top of forms or content sections.

✗ When NOT to Use

Don't use for field-level errors (use FormError), status indicators (use Badge), navigation feedback (use toast notifications), or marketing callouts (use marketing components).

Props

varianttitleclassNamestylechildrenonClickonChange

Components