Toast

Organism

Kısa süreli bildirim kartı. success/warning/error/info/loading varyantları; title, message ve action desteği.

Success

Preview

File uploaded

report.pdf has been uploaded successfully.

Code

<%- include('modules/ui/Toast', {
  variant: 'success',
  title: 'File uploaded',
  message: 'report.pdf has been uploaded successfully.'
}) %>

Error

Preview

Upload failed

The file exceeds the 10 MB size limit.

Code

<%- include('modules/ui/Toast', {
  variant: 'error',
  title: 'Upload failed',
  message: 'The file exceeds the 10 MB size limit.',
  actionLabel: 'Try again'
}) %>

Warning

Preview

Session expires in 5 minutes.

Code

<%- include('modules/ui/Toast', {
  variant: 'warning',
  message: 'Session expires in 5 minutes.'
}) %>

Info

Preview

New update

Version 2.4 is available. Refresh to apply.

Code

<%- include('modules/ui/Toast', {
  variant: 'info',
  title: 'New update',
  message: 'Version 2.4 is available. Refresh to apply.'
}) %>

Loading

Preview

Saving your changes…

Code

<%- include('modules/ui/Toast', {
  variant: 'loading',
  message: 'Saving your changes…',
  persistent: true
}) %>

Source modules/ui/Toast.ejs

<%
  var _v           = locals.variant     || 'info';
  var _title       = locals.title       || '';
  var _message     = locals.message     || '';
  var _actionLabel = locals.actionLabel || '';
  var _actionHref  = locals.actionHref  || '';
  var _persistent  = !!locals.persistent;

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

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