Notifications

Alert notifications, dismissible messages, and activity timelines.

Color Alerts

Solid background alert variants.

Success — This is a success notification.

Info — This is a info notification.

Warning — This is a warning notification.

Danger — This is a danger notification.

Accent — This is a accent notification.

Light Alerts with Icons

Soft background with icon and colored text.

This is a success notification with an icon.

This is a info notification with an icon.

This is a warning notification with an icon.

This is a danger notification with an icon.

Dismissible Notifications

Click the X to dismiss.

Welcome!

Your account has been created successfully.

Update Available

A new version is available. Please refresh to update.

Warning

Your storage is almost full. Consider upgrading your plan.

Rounded Notifications

Pill-shaped notification bars.

New message received

File uploaded successfully

Payment processing...

Content-Rich Notifications

Detailed notification with heading, body, and action.

Successfully Deployed!

Your application has been deployed to production. All health checks passed and the new version is live.

Subscription Expiring

Your Pro subscription will expire in 3 days. Renew now to keep access to all features.

Build Failed

The latest build failed due to a type error in src/components/Auth.tsx on line 42. Check the error logs for details.

Activity Timeline

Chronological event feed.

10:30 AM

Mark deployed v2.4.1

Production deployment completed.

09:15 AM

Sara approved PR #247

Code review passed with no comments.

08:00 AM

Build #1892 started

CI/CD pipeline triggered by push to main.

Yesterday

Lisa updated docs

Design system documentation refreshed.

2 days ago

Tom created branch

Feature branch auth-refactor created.