Components
Messages and empty states
Use concise context and a clear explanation when there is nothing to show.
On this page
Purpose and composition
MessageBar provides a striped contextual banner. EmptyState provides a generic egg illustration and “Nothing here yet!” message.
Anatomy
- Banner message
- Empty illustration
- Short empty-state heading
Configuration and variants
| Input or variant | Contract |
|---|---|
| MessageBar message | Plain contextual copy. |
| EmptyState | Generic presentation; no task-specific recovery action is built in. |
States and feedback
These are static presentation components. Neither should imply that a request succeeded or failed without corresponding state.
Interaction and responsive behavior
Place an empty state in its collection context and add a meaningful next action in the parent when one exists.
Accessibility and known limits
MessageBar has no status/alert role. Use an explicit live announcement strategy for asynchronous feedback rather than treating this banner as one.
Source references
| File | Responsibility |
|---|---|
| src/components/MessageBar.tsx | Context banner |
| src/components/EmptyState.tsx | Generic empty state |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0