Empty Box
A placeholder component displayed when there is no content available. Provides visual feedback to users in empty states.
Overview
- size
- small · large
All options
Size and second text
| content \ size | large | small |
|---|---|---|
| text | No items to display | No items to display |
| text + secondText | No items to display Try adjusting your filters | No items to display Try adjusting your filters |
Examples
With second text
Add supplementary text below the main message for additional context (center aligned).
No messages yet
Start a conversation to see messages here
No results found
Try adjusting your search or filters
Accessibility
Decorative icon
The alert icon is marked aria-hidden, so screen readers read only the text and second text.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| text | string | Yes | — |
| secondText | string | No | — |
| size | "small" | "large" | Yes | — |