AlertBanner

Organism

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

Info

Preview

Heads up

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

Code

<%- include('modules/ui/AlertBanner', {
  variant: 'info',
  title: 'Heads up',
  message: 'You can update your preferences at any time.'
}) %>

Success

Preview

Changes saved

Your profile has been updated successfully.

Code

<%- include('modules/ui/AlertBanner', {
  variant: 'success',
  title: 'Changes saved',
  message: 'Your profile has been updated successfully.'
}) %>

Warning

Preview

Subscription expiring

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

Code

<%- include('modules/ui/AlertBanner', {
  variant: 'warning',
  title: 'Subscription expiring',
  message: 'Your plan expires in 3 days.',
  actionLabel: 'Renew plan'
}) %>

Error

Preview

Payment failed

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

Update billing

Code

<%- include('modules/ui/AlertBanner', {
  variant: 'error',
  title: 'Payment failed',
  message: 'We could not charge your card.',
  actionLabel: 'Update billing',
  actionHref: '/billing'
}) %>

Dismissible

Preview

This alert can be dismissed.

Code

<%- include('modules/ui/AlertBanner', {
  variant: 'info',
  message: 'This alert can be dismissed.',
  dismissible: true
}) %>

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) { %>
  
  <% } %>