EmptyState
Markdown for agentsPlaceholder for empty collections, zero-result searches and unconfigured features — title, description and action slots.
npx slipstream-ui@latest add empty-stateEmpty collection
No classes yet
Create your first class to start scheduling students.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Primary message. |
| description | string | — | Supporting line explaining the next step. |
| icon | ReactNode | — | Decorative icon above the title. |
| action | ReactNode | — | Primary action (Button or link). |
| secondaryAction | ReactNode | — | Secondary action beside the primary one. |
| size | 'sm' | 'md' | 'md' | Compact padding for panels and table bodies. |
Accessibility
- Actions are real controls, so they stay focusable and announced.
- Use Alert for failures — empty is a normal state, not an error.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.