Alerts & Notifications
Info Bars
Full-width informational bars (from Figma)
Simple example info bar/tip
Simple example success bar/tip
Simple example error bar/tip
Simple example warning bar/tip
<div class="xcart-alert xcart-alert-info">
<span class="xcart-alert-content">Info message</span>
</div>
<div class="xcart-alert xcart-alert-success">...</div>
<div class="xcart-alert xcart-alert-danger">...</div>
<div class="xcart-alert xcart-alert-warning">...</div>Info Bars with Toggle
Alerts with enable/disable toggle on right side
Simple example info bar/tip
Simple example success bar/tip
Simple example error bar/tip
Simple example warning bar/tip
<div class="xcart-alert xcart-alert-success">
<span class="xcart-alert-content">Alert with toggle</span>
<div class="xcart-alert-toggle">
<label class="xcart-toggle">
<input type="checkbox" checked>
<span class="xcart-toggle-slider"></span>
</label>
</div>
</div>Snack Bars (Toast Notifications)
Compact notification messages with close button (from Figma)
Simple example success snack bar
Simple example error snack bar
Simple example warning snack bar
Simple example info snack bar
<div class="xcart-snack xcart-snack-success">
<span class="xcart-snack-content">Success message</span>
<button class="xcart-snack-close"><i class="fas fa-times"></i></button>
</div>
<div class="xcart-snack xcart-snack-error">...</div>
<div class="xcart-snack xcart-snack-warning">...</div>Dismissible Alerts
Alert with close button
Settings saved successfully. This alert can be dismissed.
<div class="xcart-alert xcart-alert-success xcart-alert-dismissible">
<span class="xcart-alert-content">
<i class="fas fa-check-circle"></i> Message
</span>
<button type="button" class="xcart-alert-close">×</button>
</div>Alerts with Icons
Common alert patterns with icons
Order #00055 has been successfully synced to Acumatica as SO/200055.
3 orders are waiting in the sync queue. Processing may take a few minutes.
Failed to sync order #00057: Customer not found in Acumatica.
Automatic sync is enabled. Orders will be sent to Acumatica every 5 minutes.
Alert with Actions
Alert with action buttons
Your Acumatica session has expired.
5 orders failed to sync.
Snack Bar Positioning
Example of snack bar container positioning
Order synced successfully
<!-- Container for centered bottom positioning -->
<div class="xcart-snack-container">
<div class="xcart-snack xcart-snack-success xcart-snack-enter">
<span class="xcart-snack-content">Message</span>
<button class="xcart-snack-close">...</button>
</div>
</div>CSS Classes Reference
Info Bar Classes
| Class | Background | Description |
|---|---|---|
.xcart-alert |
- | Base alert class |
.xcart-alert-info |
#DDF1FF |
Light blue info alert |
.xcart-alert-success |
#CEEBC5 |
Light green success alert |
.xcart-alert-danger |
#F6E4E6 |
Light red error alert |
.xcart-alert-warning |
#F7E9C6 |
Light yellow warning alert |
.xcart-alert-dismissible |
- | Alert with close button |
.xcart-alert-toggle |
- | Container for toggle switch |
Snack Bar Classes
| Class | Background | Description |
|---|---|---|
.xcart-snack |
- | Base snack bar class |
.xcart-snack-success |
#5AB237 |
Solid green snack |
.xcart-snack-error |
#BB1F34 |
Solid red snack |
.xcart-snack-warning |
white | White with border snack |
.xcart-snack-info |
#DDF1FF |
Light blue snack |
.xcart-snack-container |
- | Fixed position container |
.xcart-snack-enter |
- | Slide-up entrance animation |
.xcart-snack-exit |
- | Slide-down exit animation |
Design Specifications (Figma)
Info Bars
- Font: Open Sans Regular 14px
- Padding:
14px 16px - Border-radius:
4px - Optional toggle on right side
Snack Bars (Toast)
- Min-width:
300px - Padding:
12px 16px - Close button on right
- Box-shadow for elevation
Info Bar Colors
- Info:
#DDF1FF - Success:
#CEEBC5 - Error:
#F6E4E6 - Warning:
#F7E9C6
Snack Bar Colors
- Success:
#5AB237(solid green) - Error:
#BB1F34(solid red) - Warning: white + border