Alert

Displays important messages to attract user attention.

Default

The default alert uses a card background with a subtle border.

This is a default alert with a clean, bordered appearance. Use it for general informational messages.

Used for error messages or critical warnings.

Your session has expired. Please log in again to continue.

Alerts can also be used without a title for simple messages.

Your profile has been updated successfully.

Unable to connect to the server. Please check your connection.

Alerts can be used without icons for a cleaner look.

A new version of the application is available. Please refresh the page to update.

The system will be under maintenance on Saturday from 2 AM to 4 AM. Some services may be temporarily unavailable.

Common use cases for alerts in applications.

Borders, spacing and typography align with the Clarity spec.

We've shipped dark mode and improved keyboard navigation. Visit Settings → Appearance to try it out.

Stay updated with project changes. Enable browser notifications to receive real-time updates.

Unable to sync your changes. Some edits may not be saved. Please check your internet connection and try again.

Use the compact size for inline or field-level validation messages.

This field is required.

Invalid email format.

Alerts can include action buttons for user interaction.

Version 2.0 is now available with new features and improvements.

Unable to connect to the server. Your changes may not be saved.

Custom styled success alert using inline classes.

Your payment of $99.00 has been processed successfully.

A receipt has been sent to your email, and your plan is active immediately.