LoadMore
Markdown for agentsLoad-more control with pending and end-of-list states.
npx @slipstream-ui/cli@latest add load-morePaginated deal grid
Deal cards would render here.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| hasMore | boolean | required | Whether another page is available. |
| onLoadMore | () => void | required | Request the next page. |
| loading | boolean | false | Loading state. |
| loadLabel | string | 'Load more' | Button label. |
| loadingLabel | string | 'Loading...' | Loading label. |
| endLabel | string | 'You're all caught up.' | End-of-list message. |
Accessibility
- The wrapper uses aria-live polite and loading sets aria-busy.
- At the end, the button is replaced by a status message.
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.