Centrim Design System — a token-first, accessible React component system.
Empty states
One shell, six named states and three icon treatments. Every list, table, panel and search result gets a placeholder that explains what happened and what to do next.
EmptyState / NoResultsState / ErrorState / LoadingState / WarningState / SuccessState
Explains why a region has nothing to show and offers the single most useful next step. All six share one shell, so spacing, type hierarchy and action placement are identical everywhere.
import { EmptyState, NoResultsState, ErrorState, LoadingState, WarningState, SuccessState } from "@/design-system";
When to use
- A list, table, panel or search result has no rows to render
- A region failed to load and needs a retry route
- A first-run surface where the user has not created anything yet
When not to use
- Field-level validation — use InlineFeedback
- Section-level status above content that does exist — use Alert
- Transient confirmations — use Toast
Search — halo treatment
iconTreatment='halo' centres the glyph in a concentric medallion. Use it for full-region placeholders such as an empty search result.
No Users found
Please search again.
Scenario library
Same shell, scenario-specific icon and copy. Never invent a bespoke placeholder per screen.
No results for “onboarding”
Check the spelling or clear a filter to widen the search.
Create your first project
Projects group tasks, files and conversations for one piece of work.
Your inbox is clear
New messages from your team will appear here.
No notifications
You will be notified when a request needs your review.
No documents uploaded
Add contracts, certificates and ID documents to this record.
Nothing scheduled this week
Shifts and appointments you create will show on this calendar.
Failure, waiting and completion
The remaining named states so a region can describe every outcome, not just emptiness.
Could not load users
The request timed out. Nothing was changed.
Directory sync is paused
New team members will not appear until sync is resumed.
Loading…
Fetching team members…
All invitations sent
248 residents will receive an email in the next few minutes.
Compact — inline in a small panel
size='sm' with the framed icon treatment for narrow panels and right-rail cards.
No direct reports
This person does not manage anyone yet.
No notes
Notes added to this record appear here.