Alerts

Contextual feedback messages for user actions. Works with CSS-only or enhanced with JavaScript.

Basic Alerts

Alerts are available in different variants for various contexts:

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

Add a close button with .focus-alert-dismissible class:

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:

JavaScript 
// Create an alert
const alert = Alert.show({
  type: 'success',
  message: 'Your changes have been saved!',
  dismissible: true,
  container: document.getElementById('alertContainer')
})

// Dismiss it later
Alert.dismiss(alert)

// Or use Alert.close() - same thing
Alert.close(alert)

Alert.show(config)

Create and show an alert.

Alert.show({
  type: 'info',           // 'info', 'success', 'warning', 'danger', 'primary'
  message: '',            // Alert message
  dismissible: true,      // Show close button (default: true)
  container: document.body // Where to insert alert
})

Returns: Alert element

Alert.dismiss(element) / Alert.close(element)

Dismiss an alert with fade-out animation.

const alert = Alert.show({ message: 'Hello' })
Alert.dismiss(alert)  // or Alert.close(alert)

CSS Classes

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