Alert

Alert messages for important information.

Variants

<div class="af-alert af-is-primary">
  <strong>
    Primary Alert:
  </strong>
  This is a primary alert message.
</div>
<div class="af-alert af-is-success">
  <strong>
    Success Alert:
  </strong>
  Operation completed successfully.
</div>
<div class="af-alert af-is-warning">
  <strong>
    Warning Alert:
  </strong>
  Please review this information.
</div>
<div class="af-alert af-is-danger">
  <strong>
    Danger Alert:
  </strong>
  An error has occurred.
</div>
<div class="af-alert af-is-info">
  <strong>
    Info Alert:
  </strong>
  Here's some helpful information.
</div>

Variant Classes

• af-is-primary - Primary/informational
• af-is-success - Success/positive
• af-is-warning - Warning/caution
• af-is-danger - Error/destructive
• af-is-info - Informational

Live Example

Primary Alert: This is a primary alert message.

Success Alert: Operation completed successfully.

Warning Alert: Please review this information.

Danger Alert: An error has occurred.

Info Alert: Here’s some helpful information.