Components
Messages, empty states and headings
Use simple guidance to explain an empty collection or product-wide status without inventing a success outcome.
On this page
Purpose and usage
Use simple guidance to explain an empty collection or product-wide status without inventing a success outcome.
Anatomy
| Part | Contract |
|---|---|
| Message | Full-width source turquoise banner |
| Empty | Egg icon and Nothing here yet! |
| Loading | Spinner |
| Heading | Title and optional subtitle |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| MessageBar | message string |
| EmptyState | No configurable copy in source |
| PageHeading | title and optional subtitle |
State coverage
| State | Implemented behavior |
|---|---|
| Message | Visual status text |
| Empty | No data in the owning collection |
| Pending | Separate loading state |
Interaction and composition
- Choose empty, loading, failed and unauthorized states deliberately.
- Do not use an empty collection to hide a failed fetch.
- Add an appropriate next action in the parent where the source generic empty message lacks one.
Accessibility and readiness
MessageBar has no live-region role; dynamic messages need explicit announcement semantics. EmptyState cannot accept contextual text. Spinner naming and reduced motion need review in the containing workflow.
Source references
| File | Responsibility |
|---|---|
| src/components/MessageBar.tsx | Striped status banner |
| src/components/EmptyState.tsx | Empty collection message |
| src/components/LoadingSpinner.tsx | Pending visual |
| src/components/PageHeading.tsx | Route heading |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1