Alerts

Alerts display important messages to users. Use different variants for different severity levels.

Alert Variants

Primary! This is a primary alert message.
Secondary! This is a secondary alert message.
Success! Your action was completed successfully.
Error! Something went wrong. Please try again.
Warning! This action may have consequences.
Info! Here's some helpful information. 
<div class="ui-alert ui-alert--primary">
  <strong>Primary!</strong> This is a primary alert message.
</div>

<div class="ui-alert ui-alert--success">
  <strong>Success!</strong> Your action was completed successfully.
</div>

<div class="ui-alert ui-alert--danger">
  <strong>Error!</strong> Something went wrong. Please try again.
</div>

<div class="ui-alert ui-alert--warning">
  <strong>Warning!</strong> This action may have consequences.
</div>

<div class="ui-alert ui-alert--info">
  <strong>Info!</strong> Here's some helpful information.
</div>

Dismissible Alert

Add a close button to allow users to dismiss the alert.

You can dismiss this alert by clicking the X button. 
<div class="ui-alert ui-alert--success ui-alert--dismissible">
  <span>You can dismiss this alert by clicking the X button.</span>
  <button class="ui-alert__close">&times;</button>
</div>

Alert with Icon

Combine with flex utilities to add icons.

ⓘ This alert includes an icon for better visibility. 
<div class="ui-alert ui-alert--info ui-d-flex ui-items-center ui-gap-3">
  <svg class="ui-icon">...</svg>
  <span>This alert includes an icon for better visibility.</span>
</div>

Alert with Link

Warning! Your subscription is about to expire. Renew now. 
<div class="ui-alert ui-alert--warning">
  <strong>Warning!</strong> Your subscription is about to expire.
  <a href="#" class="ui-alert__link">Renew now</a>.
</div>

CSS Classes Reference

Class Description
.ui-alert Base alert class
.ui-alert--primary Primary color variant
.ui-alert--secondary Secondary color variant
.ui-alert--success Success color variant
.ui-alert--danger Danger/error color variant
.ui-alert--warning Warning color variant
.ui-alert--info Info color variant
.ui-alert--dismissible Adds padding for close button
.ui-alert__close Close button styling
.ui-alert__link Styled link within alert