Alerts
Contextual feedback messages for user actions. Works with CSS-only or enhanced with JavaScript.
Basic Example
Use success for positive outcomes (saved, submitted), danger for errors that need attention, warning for important notices, info for helpful tips, and primary for general highlights:
A simple primary alert - check it out!
A simple success alert - check it out!
A simple info alert - check it out!
A simple warning alert - check it out!
A simple danger alert - check it out!
HTML
<div class="focus-alert focus-alert-primary">Primary alert!</div>
<div class="focus-alert focus-alert-success">Success alert!</div>
<div class="focus-alert focus-alert-info">Info alert!</div>
<div class="focus-alert focus-alert-warning">Warning alert!</div>
<div class="focus-alert focus-alert-danger">Danger alert!</div>Dismissible Alerts
Make alerts dismissible for temporary messages or non-critical information that users can acknowledge and remove. Use permanent alerts for critical errors that need to stay visible:
Warning! You should check this out.
HTML
<div class="focus-alert focus-alert-warning focus-alert-dismissible">
<strong>Warning!</strong> You should check this out.
<button class="focus-alert-close" data-focus-alert-close>×</button>
</div>JavaScript API
Create and dismiss alerts programmatically.
Show Alert
JavaScript
const alert = Alert.show({
type: 'success',
message: 'Your changes have been saved!',
dismissible: true,
container: document.getElementById('alertContainer')
})Dismiss Alert
JavaScript
Alert.dismiss(alert)
Alert.close(alert)Methods
| Method | Returns | Description |
|---|---|---|
Alert.show(options) |
Element | Create and show an alert |
Alert.dismiss(element) |
void | Dismiss alert with fade-out animation |
Alert.close(element) |
void | Alias for dismiss() |
Options
| Option | Type | Default | Description |
|---|---|---|---|
type |
string | 'info' |
Alert type: 'info', 'success', 'warning', 'danger', 'primary' |
message |
string | '' |
Alert message content |
dismissible |
boolean | true |
Show close button |
container |
Element | document.body |
Where to insert the alert |
CSS Classes Reference
| Class | Description |
|---|---|
.focus-alert |
Base alert class (required) |
.focus-alert-primary |
Primary variant |
.focus-alert-success |
Success variant (green) |
.focus-alert-info |
Info variant (blue) |
.focus-alert-warning |
Warning variant (yellow) |
.focus-alert-danger |
Danger variant (red) |
.focus-alert-dismissible |
Makes alert dismissible |
.focus-alert-close |
Close button |