Alerts

Provide contextual feedback messages for user actions.

Alert Variants

Success! Your action was completed successfully.
Warning! Please check your input and try again.
Error! Something went wrong. Please try again.
Info: This is an informational message.
<div class="ethio-alert ethio-alert-success">
    <strong>Success!</strong> Your action was completed.
  </div>
  
  <div class="ethio-alert ethio-alert-warning">
    <strong>Warning!</strong> Please check your input.
  </div>
  
  <div class="ethio-alert ethio-alert-error">
    <strong>Error!</strong> Something went wrong.
  </div>
  
  <div class="ethio-alert ethio-alert-info">
    <strong>Info:</strong> Informational message.
  </div>

Dismissible Alerts

Success! This alert can be dismissed.
Warning! Click the X to dismiss this alert.
<div class="ethio-alert ethio-alert-success ethio-alert-dismissible">
    <strong>Success!</strong> This alert can be dismissed.
    <button class="ethio-alert-close">×</button>
  </div>