Badges / Tags
Status Badges
General status indicators
Success
Warning
Error
Info
Not synced
Draft
<span class="xcart-badge xcart-badge-success">Success</span>
<span class="xcart-badge xcart-badge-warning">Warning</span>
<span class="xcart-badge xcart-badge-danger">Error</span>
<span class="xcart-badge xcart-badge-info">Info</span>Sales Channel Tags
Identify order source/channel
eBay US
Amazon CA
Walmart
Online Store
Manual order
Quote
<span class="xcart-badge xcart-badge-ebay">eBay US</span>
<span class="xcart-badge xcart-badge-amazon">Amazon CA</span>
<span class="xcart-badge xcart-badge-walmart">Walmart</span>
<span class="xcart-badge xcart-badge-online-store">Online Store</span>Supplier Tags
Warehouse distributors and suppliers
ATD
Keystone
Torqued
My Store
Turn14
Multi
Meyer
Wheel Pros
Premier
Dix Performance
<span class="xcart-badge xcart-badge-atd">ATD</span>
<span class="xcart-badge xcart-badge-keystone">Keystone</span>
<span class="xcart-badge xcart-badge-turn14">Turn14</span>
<span class="xcart-badge xcart-badge-multi">Multi</span>Provider Tags
Data providers and catalog sources
SEMA Data
Autosync
ASAP
CatalogRack
<span class="xcart-badge xcart-badge-sema">SEMA Data</span>
<span class="xcart-badge xcart-badge-autosync">Autosync</span>
<span class="xcart-badge xcart-badge-asap">ASAP</span>Type Tags
General type indicators
Catalog provider
Supplier
Custom Type
<span class="xcart-badge xcart-badge-catalog-provider">Catalog provider</span>
<span class="xcart-badge xcart-badge-supplier">Supplier</span>Badge States
Enabled and disabled states
Enabled
ActiveDisabled
Disabled<span class="xcart-badge xcart-badge-disabled">Disabled</span>Clickable Badges
Badges that link to external systems (e.g., Acumatica)
<a href="#" class="xcart-badge xcart-badge-success xcart-badge-clickable">
<i class="fas fa-check-circle"></i> SO/200057
</a>Badges in Table
Example usage in orders table
CSS Classes Reference
Status Badges
| Class | Background | Color | Preview |
|---|---|---|---|
.xcart-badge-success |
#CEEBC5 |
#2B7616 |
Success |
.xcart-badge-warning |
#F7E9C6 |
#8B6914 |
Warning |
.xcart-badge-danger |
#F6E4E6 |
#BB1F34 |
Error |
.xcart-badge-info |
#DDF1FF |
#2274A6 |
Info |
Sales Channel Tags
| Class | Background | Preview |
|---|---|---|
.xcart-badge-ebay |
#D6ECD7 |
eBay |
.xcart-badge-amazon |
#FFEBCC |
Amazon |
.xcart-badge-walmart |
#FFF7B6 |
Walmart |
.xcart-badge-online-store |
#F5F5F5 |
Online Store |
Supplier Tags
| Class | Background | Preview |
|---|---|---|
.xcart-badge-atd |
#DDDAFF |
ATD |
.xcart-badge-keystone |
#FFCACA |
Keystone |
.xcart-badge-turn14 |
#CCECF8 |
Turn14 |
.xcart-badge-multi |
#FFDBC5 |
Multi |
.xcart-badge-meyer |
#FFDC99 |
Meyer |
.xcart-badge-wheel-pros |
#FFC9DD |
Wheel Pros |
.xcart-badge-torqued |
#FEE0FD |
Torqued |
Provider Tags
| Class | Background | Preview |
|---|---|---|
.xcart-badge-sema |
#FFE4E4 |
SEMA |
.xcart-badge-autosync |
#EAEAEA |
Autosync |
.xcart-badge-asap |
#C4E0FA |
ASAP |
Design Specifications (Figma)
Base Styling
- Font: Open Sans Regular 12px
- Line-height: 20px
- Padding:
4px 10px - Border-radius:
3px
Status Colors
- Success:
#CEEBC5/#2B7616 - Warning:
#F7E9C6/#8B6914 - Error:
#F6E4E6/#BB1F34 - Info:
#DDF1FF/#2274A6