AlertBanner

Organism

Bilgi, uyarı, hata ve başarı mesajları için renk-kodlu banner. dismissible ve action desteği.

Info

Heads up

You can update your preferences at any time from the settings page.

Success

Changes saved

Your profile has been updated successfully.

Warning

Subscription expiring

Your plan expires in 3 days. Renew now to avoid interruption.

Error

Payment failed

We could not charge your card. Please update your billing details.

Update billing

Dismissible

This alert can be dismissed.

Source modules/ui/AlertBanner.ejs

<%
  var _v           = locals.variant     || 'info';
  var _title       = locals.title       || '';
  var _message     = locals.message     || '';
  var _dismissible = !!locals.dismissible;
  var _actionLabel = locals.actionLabel || '';
  var _actionHref  = locals.actionHref  || '';
  var _id          = locals.id          || 'alert-' + Math.random().toString(36).substr(2, 9);

  var variantMap = {
    success: { container: 'bg-success-subtle border-success text-success-fg', icon: 'fa-circle-check' },
    warning: { container: 'bg-warning-subtle border-warning text-warning-fg', icon: 'fa-triangle-exclamation' },
    error:   { container: 'bg-error-subtle border-error text-error-fg',       icon: 'fa-circle-xmark' },
    info:    { container: 'bg-info-subtle border-info text-info-fg',          icon: 'fa-circle-info' },
  };
  var vm = variantMap[_v] || variantMap.info;
%>

  
  
    <% if (_title) { %><%= _title %><% } %>
    <%= _message %>
    <% if (_actionLabel) { %>
    
      <% if (_actionHref) { %>
      <%= _actionLabel %>
      <% } else { %>
      
      <% } %>
    
    <% } %>
  
  <% if (_dismissible) { %>
  
  <% } %>