adx design system · Chapter 06

Feedback the system talks back

Saved, warned, refused, empty — every outcome has a voice. Banners speak in three tones, overlays ask before anything irreversible, and even an empty page says the right kind of nothing.

Feedback anatomyLive from adx
Workflow is valid
Saved as version 3
Preserved 2 stages in use
Could not save — a start stage is required
Banners & overlays

Say it in place, ask before harm

Banners report in place — ok, warn, err. The modal holds work, the dialog asks yes/no (never window.confirm), and the drawer slides in for filters and detail without losing the page.

AdxBanner
Workflow is valid
Saved as version 3
Preserved 2 stages in use
Could not save — a start stage is required
tone: ok | warn | err · lines[] or children
AdxModal / AdxDialog / AdxDrawer
All three are live — press one. Titles use the same two-weight pair as every heading.
dialog = confirm/ask (the app's useConfirm()) · drawer = side panel · modal = the centred popup
Empty states

Four kinds of nothing

An empty list means four different things — all done, nothing yet, no match, or a quiet admin queue — and each gets its own pictogram and tone. The mapping is fixed; never swap them.

AdxEmptyState
Nothing waiting on you
kind="clear" — the user is DONE — a positive feeling (default)
No documents yet
kind="blank" — no data yet / never created (neutral)
No matching results
kind="no-match" — searched or filtered to nothing
No pending requests
kind="admin" — internal / admin / ops pages
No matching results
size="sm" — small dropdowns and widgets (32px pictogram) · `sub` = the quiet second line
the 4-kind mapping is fixed · no "congratulations", no dashes around the text · in tables nest inside AdxEmptyRow

The loop closes, back to the start

That's the whole system — six chapters, one sheet of tokens. Round again from the raw material.

NavigationActionsFormsData