Alert

Alert messages for important information.

Variants

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.

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

Accessibility

• Polite messages (primary, success, info, warning): role="status"
• Errors and urgent messages (danger): role="alert"
• Decorative icons: aria-hidden="true"

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