Buttons
Primary Buttons
Main action buttons — Active, Hover, Disabled, Loading states
Default
:hover
:disabled
.xcart-btn-loading
<button class="xcart-btn xcart-btn-primary">Active</button>
<button class="xcart-btn xcart-btn-primary" disabled>Disabled</button>
<button class="xcart-btn xcart-btn-primary xcart-btn-loading">Loading</button>Secondary Buttons
White background with border — inverts to blue on hover
Default
:hover (inverts!)
:disabled
<!-- Secondary is alias for Outline -->
<button class="xcart-btn xcart-btn-secondary">Secondary</button>
<button class="xcart-btn xcart-btn-outline">Outline</button>Button Sizes
Small (32px), Default (40px), Large (48px)
32px height
40px height
48px height
Secondary Sizes
<button class="xcart-btn xcart-btn-primary xcart-btn-sm">Small</button>
<button class="xcart-btn xcart-btn-primary">Default</button>
<button class="xcart-btn xcart-btn-primary xcart-btn-lg">Large</button>Disclosure Buttons
Dropdown buttons with caret indicator
<button class="xcart-btn xcart-btn-primary xcart-btn-disclosure">Actions</button>
<button class="xcart-btn xcart-btn-secondary xcart-btn-disclosure">More Options</button>Icon-only Buttons
Square buttons with icon only (40x40px default)
<button class="xcart-btn xcart-btn-primary xcart-btn-icon">
<i class="fas fa-plus"></i>
</button>
<button class="xcart-btn xcart-btn-secondary xcart-btn-icon">
<i class="fas fa-edit"></i>
</button>Buttons with Icons
Text + icon combinations
<button class="xcart-btn xcart-btn-primary">
<i class="fas fa-plus"></i> Add New
</button>
<button class="xcart-btn xcart-btn-secondary">
<i class="fas fa-cloud-upload-alt"></i> Sync to Acumatica
</button>Link Buttons
Text-only buttons for tertiary actions
<button class="xcart-btn xcart-btn-link">Link Button</button>
<button class="xcart-btn xcart-btn-link">
<i class="fas fa-times"></i> Cancel
</button>Status Buttons
Success and danger actions
<button class="xcart-btn xcart-btn-success">
<i class="fas fa-check"></i> Confirm
</button>
<button class="xcart-btn xcart-btn-danger">
<i class="fas fa-trash"></i> Delete
</button>Button Groups
Multiple buttons in a row
CSS Classes Reference
| Class | Description |
|---|---|
.xcart-btn |
Base button class (required). Height: 40px, Font: 16px SemiBold |
.xcart-btn-primary |
Primary blue background (#2274A6) |
.xcart-btn-secondary |
White background, inverts to blue on hover |
.xcart-btn-outline |
Alias for .xcart-btn-secondary |
.xcart-btn-link |
Text-only, no background |
.xcart-btn-success |
Green background (#28A745) |
.xcart-btn-danger |
Red background (#DC3545) |
.xcart-btn-sm |
Small size (height: 32px) |
.xcart-btn-lg |
Large size (height: 48px) |
.xcart-btn-disclosure |
Adds dropdown caret after text |
.xcart-btn-icon |
Square icon-only button (width = height) |
.xcart-btn-loading |
Shows animated loading dots |
disabled |
HTML attribute for disabled state |
Design Specifications
From Figma Design System
Typography
- Font: Open Sans SemiBold
- Size: 16px (14px for small)
- Line-height: 30px
Spacing
- Padding: 5px 20px (default)
- Border-radius: 6px
- Icon gap: 6px
Colors
- Primary: #2274A6
- Hover: #1a5a82 (darker)
- Disabled: 50% opacity
Sizes
- Small: 32px height
- Default: 40px height
- Large: 48px height