Component kit/Status and feedbackDesktop

Status and feedback

Chips, banners, toasts and the empty, loading and error states every other family falls back on. Colour tells the role, words tell the state, and a state is never shown by colour alone.

Status chips

Dot and label; one set per domain.

Catalogueproducts · Global Store

DraftAvailableRetiredDraft v1Available v4Retired v5Not yet available to brands

Order paymentorders · order detail

Awaiting paymentPaidPayment failedRefunded

Order fulfilmentorders · kanban

AwaitingIn productionShippedDeliveredSpecial orderNot mapped

ERP syncorders · retry queue

In syncPendingRetryingERP failed3 stuckNot read

Releasereleases · versions

PreviewLiveUp to date2 behind previewNot the same as previewHold 2V4

Website sectionmenu and sections

DraftReadyPublished

Campaigncampaigns

DraftScheduledLivePausedEnded

Support ticketsupport

OpenRe-openedWaiting on usWaiting on customerResolvedClosed

Severitysupport · case rail

LowMediumHigh

Refund requestfounder · refund gate

RaisedIn reviewClearedDeclined

Cloth mirrorsuper · cloths

In syncDriftMissing in mirrorMissing in LaravelTombstonedFreshStale > 6h

Sync runcloth sync · variants

RunningSucceededPartialFailed

Brand provisioningsettings · brands

ProvisioningCreated but not stockedReadyFailedUnknown

Accesspeople · api access

Bank verifiedBank pendingAdmin onlyLocked
Uses.chip.chip.plain.sf-set

Chip anatomy

Seven forms.

Available
dot + label
Available
no dot
Available v4
with version
Locked
with icon
ERP failed3
with count
Available
header, 26px
Paid
dot + label, table cell
Uses.chip.chip.lg.sf-dl

Colour roles

Every pair clears 4.5:1.

  • Success5.9:1--success · Available, Paid, Delivered, In sync, Live, Resolved
  • Info6.0:1--info · Draft, Preview, In production, Open, Running
  • Warning5.3:1--warning · Awaiting payment, Retrying, Drift, Hold, Behind preview
  • Danger5.6:1--destructive · Payment failed, ERP failed, Missing, Failed, High
  • Neutral5.5:1--neutral · Retired, Closed, Refunded, Paused, Unknown
  • Locked5.9:1--locked · Admin only, Locked (slate on the muted ground)
Uses--success--info--warning--destructive--neutral

Chips in a list

Status and version stack at the right.

Navy birdseye two-piece suitHS 81045 · Crystal Springs
Availablev4
Mid-grey flannel trousersHS 64033 · Sherry Flannel
Draftv1
Brown glen check waistcoatHS 92201 · Moorland Tweed
Retiredv5
Uses.chip.code.thumb

Status filter chips

Scroll sideways; 44px to tap.

default
focus
selected
disabled
Uses.sf-filteraria-pressed

Alerts

Stacked, full width.

Combos offered replace Ways to sell

Existing prices carried over. Brands see no change until you publish to brands.

Release v4 is live

rjclothing.com shows v4 within a minute. v3 stays in History.

Holland & Sherry cloths last synced 2 days ago

Prices and stock shown may be out of date.

Avatar is set by RJ HQ

Brands can swap the photo on this product but not the avatar.

Locked

Refund-gate queue is not wired on staging

The queue could not be read, so an empty list does not mean nothing is waiting.

Not wired
Uses.sf-alertrole=alert

Alert forms

Inline, a list, and the banner.

2 things to fix before you publish

Brands cannot adopt this product yet.

Saved edits show on preview after Update preview.

Orders
Staging?FW
Orders

No rows to show until the order book is read.

Uses.sf-alert.sf-banner.p-bar

Toasts

Above the tab bar, edge to edge. 44px to tap.

Changes savedNavy birdseye two-piece, version 5
Success
Error · stays until dismissed
Charcoal herringbone jacket retiredBrands can no longer add it.
Undo · twice the dwell
Syncing clothsHolland & Sherry · 1,840 of 3,612
Progress
Saved in GBP onlyEUR and USD still need a Laravel price.
Warning
Preview updatedSaved edits show on preview as V5.
Info
Uses.toast.k-toast.show--motion-toast-in

Stacking

Up to three; tap to spread.

Cloths synced3,612 cloths, 4 changed
Charcoal herringbone jacket retiredBrands can no longer add it.
Changes savedNavy birdseye two-piece, version 5
Uses.sf-stackdata-sf-stack

Toast, live

Fire several to see them stack.

Products
Staging?FW
Navy birdseye two-piece suitHS 81045 · Crystal Springs
Availablev4
Mid-grey flannel trousersHS 64033 · Sherry Flannel
Draftv1
Brown glen check waistcoatHS 92201 · Moorland Tweed
Retiredv5
Usesdata-sf-toaster.tabbar.k-toast

Empty states

Buttons run full width.

First usemy products

No products yet

Adopt a product from the Global Store and it appears here, ready for your prices.

No resultsmy products · filtered

No products match

Nothing in Draft matches “navy birdseye”. Try another word or clear the filter.

No permissionreleases

Only website publishers can see releases

Ask an admin for publisher access.

Uses.sf-empty.sf-tile

Compact empty

Inside a card, with no tile.

Table body
No stuck orders. Every paid order has an ERP order.
Nothing on preview yetPress Update preview to see your saved edits.
Uses.sf-compact.sf-dashbox

Skeletons

Rows and a two-up gallery.

Uses.sf-sk.sf-mrow.sf-gal

Spinners and progress

Unknown wait, counted wait.

Checking releases…
Sync cloths1,840 of 3,612
Holland & Sherry · 2 min left
Reading the order bookERP
Usually under 10 seconds
Import pricesDone
Import pricesStopped at 62%
Step progress
  • Create brand record2s
  • Link ERP account6s
  • Clone catalogue41s
  • Stock cloths
  • Take online
Route change
Orders
Staging?FW
Orders

Loading 214 orders…

Uses.spin.sf-bar.sf-steps.sf-topload

Inline errors

Beside the failure, naming the cause.

499,00
Enter each price as a plain amount above zero, like 499.00.
navy-birdseye-two-piece
This handle is used by another product.
default
focus
loading
disabled
Uses.field.err.help.err.sf-inerr

Partial failure

How many worked, and a retry for the rest.

Uses.sf-inerr.sf-fails

Page-level error

Replaces the body; bar and tabs stay.

Orders
Staging?FW

Could not reach DTC Admin

The orders service did not answer in time. Nothing was changed, and your filters are kept.

GET /api/v1/dtc/orders
504 · Today 14:20:07
request req_8f3a21c4
Uses.sf-errpage.sf-errmark.tabbar

Environment badge

In the phone bar, left of the help icon.

Staging
staging
Production
production
Local
local
Global Store
Staging?FW
Stagingstg-dtc-admin
Global Store
Stagingstg-dtc-admin.rjmtm.com
Changes here never reach customers.
Uses.staging.env-prod.sf-strip.p-bar