—
Component Library
Every UI component in the GFS Design System — buttons, inputs, navigation, feedback, loading states, and advanced patterns. Click any section to jump directly.
14 Sections
100+ Components
13Components — Buttons
Variants
Sizes
States
Default
Hover
Focus
Active
Disabled
14Components — Inputs & Forms
Input States
Helper text goes here
This field is required
Controls
Toggle On
Toggle Off
Checked
Unchecked
Selected
Unselected
Sample Form
New Shipment
15Components — Data Display
Badges & Tags
In TransitDeliveredPendingAlertArchived
Dairy ×Frozen ×Produce ×Organic
Data Table
| Shipment ID | Origin | Destination | Temp | Status | ETA |
|---|---|---|---|---|---|
| GFS-2026-05-00058 | Wisconsin, USA | Toronto, CA | -18°C | In Transit | 05/18 |
| GFS-2026-05-00057 | California, USA | Chicago, IL | 2°C | Delivered | 05/16 |
| GFS-2026-05-00056 | Idaho, USA | New York, NY | -30°C | Pending | 05/20 |
| GFS-2026-05-00055 | Texas, USA | Miami, FL | 7°C | Delivered | 05/15 |
KPI Cards
Active Shipments
128
+12% vs last week
On-Time Rate
96%
+2.1% vs target
Temp Compliance
99.2%
+0.4% MTD
In Transit
84
-3 vs yesterday
Avatars & Stacks
ML
ML
ML
ML
DJ
KR
+4
16Components — Navigation
Tabs
Overview
Shipments
Analytics
Settings
Breadcrumbs
Pagination
←
1
2
3
...
12
→
Sidebar Navigation
17Components — Feedback
Alerts
Shipment GFS-2026-05-00058 is now in transit to Toronto DC.
Temperature compliance verified. All readings within spec.
Carrier assignment pending for 3 outbound shipments.
Temperature breach detected on shipment GFS-2026-05-00041. Immediate action required.
Toast Notifications
✓ Shipment created successfully
✕ Failed to update record
Modal / Dialog
Confirm Shipment×
Are you sure you want to dispatch shipment GFS-2026-05-00058 to Toronto DC? This action will notify the carrier and begin cold chain monitoring.
18Components — Loading States
Skeleton — Card
Skeleton — Table
Spinners & Progress
Determinate Progress
19Components — Button Combinations
Form Footer — Primary + Ghost
Standard form submission
Modal Footer — Primary + Secondary + Ghost
Multi-action modal (e.g. shipment creation)
Icon Button Row — Edit / Delete / Duplicate
Table row actions
Split Button with Dropdown
Primary action with alternatives
Create & Add Another
Create from Template
Import from CSV
Button with Loading Spinner State
Disabled during async operation
Button groups reflect real UI contexts. Primary action always sits rightmost. Destructive icon buttons use error color. Loading states disable interaction and show inline spinner.
20Components — Form Layouts
Login Form
Inline Edit
Click any field to edit in place
Company
Global Food Solutions, Inc.
click to edit
Contact
Location
Edgewood, NY
click to edit
Phone
(516) 555-0142
click to edit
Multi-Column Form — Billing & Shipping
Order Addresses
Billing Address
Shipping Address
Same as billing address
Search with Filters
Shipment search and filtering
Form layouts use the GFS grid system (.g2, .form-row). Login is centered with max-width constraint. Inline edit shows both display and active states. Filter bar uses flex-wrap for responsive collapse.
21Components — Advanced Data Display
Stat Cards with Trend Lines
Revenue MTD
$1.42M
+18.3% vs last month
Active Orders
347
+24 today
Avg Delivery Time
2.4d
+0.3d vs target
Comparison Cards
Last Month
$1.20M
+18.3%
This Month
$1.42M
Q1 Avg
96.1%
-1.2%
Q2 Current
94.9%
Timeline Card
Shipment GFS-2026-05-00058
Order Created
Carrier Assigned
In Transit
Delivered
Metric Rings
90%
On-Time Rate
97%
Compliance
60%
Utilization
Data Badges
3
12
48
5
99
128
Status Indicators
System Operational
Updated 2m ago
Sync In Progress
Started 5m ago
High Latency Detected
Since 14:22 EST
Cold Chain Alert — Zone 4
12:08 EST
Scheduled Maintenance
Tomorrow 02:00 EST
Stat cards show numeric KPIs with directional mini-line charts. Comparison cards use a 3-column grid (before / delta / after). Timeline uses vertical line with dot states: done, active, pending. Metric rings use SVG stroke-dashoffset for percentage fill. Data badges are sized sm/default/lg.
22Components — Advanced Navigation
Mega Menu
Command Palette (Cmd+K)
Esc
Products
Barrel Cheddar — Bongards
Product
Barrel Cheddar — USDA
Product
Shipments
GFS-2026-05-00058 — Barrel Cheddar 40lb
In Transit
Actions
Create New Shipment
Ctrl+N
Generate Pricing Report
Ctrl+R
Stepper Navigation
✓
Order Details
✓
Carrier Selection
3
Review & Confirm
4
Dispatch
Tree Navigation
▸
Operations
▸
Shipments
Active (84)
Pending (12)
Delivered (1,204)
▸
Inventory
▸
Compliance
▸
Analytics
▸
Settings
Mega menu uses a 3-column grid panel. Command palette follows Cmd+K convention with grouped results and keyboard hints. Stepper shows linear progress through a workflow. Tree navigation supports nested expand/collapse.
23Components — Notification Variants
Inline Validation Messages
Please enter a valid email address
Shipment found — In Transit to Toronto DC
Quantity must be a positive number
Weak password — add numbers and special characters
Banners with Action Buttons
Floating Notification Stack
Application viewport
Shipment created successfully
×
Temperature log synced
×
Failed to update carrier
×
Individual Toast Variants
Record saved — 3 fields updated
×
Network error — retry in 5s
×
2 new shipments assigned to you
×
Confirmation Dialog — Destructive Action
Delete Shipment
Are you sure you want to delete shipment GFS-2026-05-00058? This will permanently remove all associated temperature logs, carrier assignments, and compliance records. This action cannot be undone.
Inline validation appears directly below fields with icon + message. Banners span full width with action link and dismiss. Toast stack layers bottom-right with descending opacity. Destructive confirmation uses red icon circle + danger button, never auto-confirms.
24Tooltip Component Patterns
Tooltips provide contextual information on hover or focus. They should contain brief, supplemental text — never essential information or interactive elements.
Simple Text
Ship this order
Dark background, white text. Max 40 chars. No line breaks. Arrow points to trigger.
With Keyboard Shortcut
Save Cmd+S
Shows keyboard shortcut. Kbd element styled with subtle background contrast.
Informational
On-Time DeliveryOrders delivered within the customer's specified window.
Title + description. Max 120 chars. Arrow on side for left/right positioning.
Error Tooltip
Temperature exceeds limit
Red background for validation/error states. Arrow points up when below trigger.
Light Variant
Last updated 2 hours ago
White background with border + shadow. Use in dark-background contexts.
Icon + Text
SQF Level 3 Certified
Leading icon for emphasis. Arrow offset from center when near screen edge.
Tooltip rules. Delay: 300ms on hover before showing; 150ms before hiding. Never put interactive content (links, buttons) inside tooltips — use a Popover instead. Tooltips must be accessible via focus (not just hover). Max width: 240px. z-index: var(--z-toast) / 9999.
25Progress Stepper Component
Progress steppers guide users through multi-step processes like order creation, onboarding, or compliance workflows. Each step shows its state: completed, active, or upcoming.
Horizontal Stepper
Order Details
Shipping
3
Review
4
Confirm
Vertical Stepper (with descriptions)
Vendor application submitted
Credit application and trade references received.
2
Credit review in progress
Checking references and running D&B report.
3
Account activation
NetSuite vendor record creation and terms assignment.
Stepper states. Complete: Cobalt fill + checkmark. Active: White fill + Cobalt border + number. Upcoming: Fog fill + Silver border + Steel number. Connector line: completed portion in Cobalt, remaining in Silver. Use horizontal for 3-5 steps; vertical for steps with descriptions or 5+ steps.
26Popover Patterns
Unlike tooltips, popovers contain interactive content (links, buttons, forms). They appear on click (not hover) and require explicit dismissal. Use z-index: var(--z-dropdown) / 100.
Info Popover
Shipment GFS-2026-05-00058
Status:In Transit
Carrier:GFS Fleet
ETA:May 17, 2:30 PM
Temp:36.2°F
View Details
Track
Click-triggered. Contains data + action buttons. White background, border + shadow. Max width: 320px.
Confirmation Popover
Cancel this order?
This will remove all items and notify the customer. This action cannot be undone.
Keep Order
Cancel
Destructive action confirmation. Red border accent. Primary action is the destructive one (right side).
User Card Popover
SR
Sarah Rodriguez
VP of Operations
srodriguez@GlobalFoodSolutions.co
(877) 728-5550 x204
Send Message
Triggered by clicking user avatar or name. Shows contact info + action. Avatar uses initials pattern.
Filter Popover
Filter Orders
Reset
Status
Apply
Multi-select filters with checkboxes. Reset link in header. Apply button at bottom. Closes on Apply or outside click.
Popover vs Modal vs Tooltip. Tooltip: non-interactive, hover-triggered, text only. Popover: interactive, click-triggered, contains actions. Modal: full-page overlay, blocks background interaction. Choose the lightest pattern that serves the use case. Popovers close on outside click; modals require explicit dismiss.