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.
Real statuses from the DTC admin: Draft, Available and Retired for the catalogue, and the order, release, ERP, support and sync states beside them.
Status chips
Square, soft fill, status-coloured text. The dot is the default.
Catalogueproducts · Global Store
Order paymentorders · order detail
Order fulfilmentorders · kanban
ERP syncorders · retry queue
Releasereleases · versions
Website sectionmenu and sections
Campaigncampaigns
Support ticketsupport
Severitysupport · case rail
Refund requestfounder · refund gate
Cloth mirrorsuper · cloths
Sync runcloth sync · variants
Brand provisioningsettings · brands
Accesspeople · api access
.chip.chip.draft.chip.available.chip.retired.chip.warning.chip.danger.chip.locked.chip.ended.chip.unmapped--status-soft-alphaChip anatomy
Same chip, seven forms.
.chip.chip.plain.chip.lg.chip.ico.sf-dlColour roles
Five roles and a lock. Every text-on-fill pair clears 4.5:1.
| Role | Token | Used for | Text on fill |
|---|---|---|---|
| Success | --success | Available, Paid, Delivered, In sync, Live, Resolved | 5.9:1 |
| Info | --info | Draft, Preview, In production, Open, Running | 6.0:1 |
| Warning | --warning | Awaiting payment, Retrying, Drift, Hold, Behind preview | 5.3:1 |
| Danger | --destructive | Payment failed, ERP failed, Missing, Failed, High | 5.6:1 |
| Neutral | --neutral | Retired, Closed, Refunded, Paused, Unknown | 5.5:1 |
| Locked | --locked | Admin only, Locked (slate on the muted ground) | 5.9:1 |
--success--info--warning--destructive--neutral--lockedChips in a list
The catalogue status beside the version and price.
.chip.code.thumb.moneyStatus filter chips
Counts add up: 168 + 31 + 15 = 214.
.sf-filteraria-pressed--accentAlerts
Six kinds. Each keeps its icon, a one-line title and what happens next.
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.
3 paid orders did not reach the ERP
£2,970.00 of paid revenue is waiting. Retrying sends the same order again, once.
Avatar is set by RJ HQ
Brands can swap the photo on this product but not the avatar.
Refund-gate queue is not wired on staging
The queue could not be read, so an empty list does not mean nothing is waiting.
.sf-alert.info.sf-alert.success.sf-alert.warning.sf-alert.danger.sf-alert.locked.sf-alert.wiredrole=alertAlert forms
Inline, with a list, and the page banner.
2 things to fix before you publish
Brands cannot adopt this product yet.
Prices below are read-only. Cloth prices are now set with the product.
Saved edits show on preview after Update preview.
No rows to show until the order book is read.
.sf-alert.sf-alert.sf-sm.sf-banner.topbarToasts
Sonner-style, bottom right. They rise 8px, dwell, then fade.
.toast.k-toast.show--e-toast--motion-toast-in--motion-toast-out--toast-dwell--toast-shiftStacking
Up to three show. The newest sits in front; hover or focus to spread them.
| Kind | Dwell | Role |
|---|---|---|
| Success, info | --toast-dwell | status |
| Undo | 2 × dwell | status |
| Error, warning | until dismissed | alert |
| Progress | until done | status |
.sf-stackdata-sf-stack--motion-toast-inToast, live
Fire several at once to see them stack and settle.
data-sf-toaster.k-toast.btn-linkEmpty states
The cause, then the next step.
No products yet
Adopt a product from the Global Store and it appears here, ready for your prices.
No products match
Nothing in Draft matches “navy birdseye”. Try another word or clear the filter.
Only website publishers can see releases
Ask an admin for publisher access.
.sf-empty.sf-tile.btn-primary.btn-secondaryCompact empty
Inside a card or a table, with no tile.
.sf-compact.sf-dashbox.sf-cardSkeletons
The real headers stay; only the data waits. A slow fade, no shimmer.
.sf-sk.sf-skrow.sf-galaria-busySpinners and progress
A spinner when the wait is unknown, a bar when it is counted.
- Create brand record2s
- Link ERP account6s
- Clone catalogue41s
- Stock cloths
- Take online
Loading 214 orders…
.spin.sf-barrole=progressbar.btn[aria-busy].sf-steps.sf-toploadInline errors
Next to the thing that failed, in words that name the cause.
Cloth sync failed: Holland & Sherry did not answer
No cloths were changed. Prices and stock still show the 9 Oct sync.
.field.err.help.err.sf-inerr.btn[aria-busy]Partial failure
Say how many worked and keep the rest usable.
3 of 214 products did not sync to the ERP
The other 211 are in sync. Each failed product keeps its last good version.
- Midnight mohair dinner suitVBC 150.2201 · Ceremonyv2Failed
- Stone linen jacketHS 30612 · Irish Linenv1Failed
- Navy chalk-stripe three-pieceVBC 403.0118 · Revengev3Retrying
.sf-inerr.sf-fails.chip.dangerPage-level error
Replaces the page body; the shell stays.
Could not reach DTC Admin
The orders service did not answer in time. Nothing was changed, and your filters are kept.
504 · Today 14:20:07
request req_8f3a21c4
.sf-errpage.sf-errmark.code.topbarEnvironment badge
Amber on staging, quiet slate on production and local. Always in the top bar, left of the help icon.
Changes here never reach customers.
.staging.env-prod--warning.sf-strip