Alert
Lightweight inline status messaging with semantic variants and optional dismissal.
$ npm install @bloc-ui/alert
Common Patterns
Variants
Use the semantic variants for neutral updates, success, warnings, and errors.
Heads up
Alerts work well for inline guidance, success messaging, and warnings.
Saved
Your pricing rules were published successfully.
Action required
A deployment check failed and needs review before shipping.
Custom Icon
Project any element into the icon slot using the blocAlertIcon attribute.
Deployed
Your build passed all checks and is live in production.
Failed
The deployment pipeline encountered an unrecoverable error.
No Icon
Set [hideIcon]="true" to remove the icon column entirely.
Scheduled maintenance
The system will be unavailable on Sunday between 02:00 and 04:00 UTC.
Your trial expires in 3 days.
Dismissible
Dismissal is useful for non-blocking notices that should stay close to the content.
Sync paused
Reconnect to resume background sync.