Components / Data Display
Badge
Compact labels for status, categories, and counts.
Solid
DefaultSuccessWarningError
Outline
DefaultSuccessWarningError
Sizes
SmallLarge
Status
Colour-coded status badges indicating required action or current state. Consistent across all system views.
Action RequiredUser needs to take action
PendingAwaiting user response
Awaiting SupplierWaiting on supplier confirmation
ConfirmedConfirmed and ready
CompletedSuccessfully completed
CancelledCancelled by user or system
RejectedRejected by supplier
Quantity / Inventory
System colour codes for inventory and availability status pills. All colours meet WCAG AAA contrast on white backgrounds.
Live InventoryAPI#B4D4DAAAA 10.25:1
Allotment (8)AL (8)#C6DAFFAAA 11.4:1
Free SaleFS#D5CFFFAAA 10.88:1
MixedMX#F5C3E4AAA 11.41:1
On RequestRQ#FFD78EAAA 11.77:1
ClosedC#FFA99BAAA 8.74:1
Not AvailableNA#FFA99BAAA 8.74:1
Sold OutSO#FFA99BAAA 8.74:1
PromotionsAAA#BFE5B8AAA 11.58:1