API Reference
Complete API documentation for components, utilities, and framework core
EmptyStates
Empty state displays with three variants (EmptyState, InlineEmptyState, IllustratedEmptyState)
🔧 Props
| Property | Type | Default | Description |
|---|---|---|---|
| icon | Element|string | undefined | Oracle JET icon name or element |
| title* | string | - | Primary heading text |
| description | string | undefined | Supporting description |
| action | Element | undefined | Primary action button |
| secondaryAction | Element | undefined | Secondary action button |
| variant | string | 'default' | IllustratedEmptyState only: 'default', 'services', 'messages', 'bookings', 'neighbors' |
| class | string | - | Container classes |
✨ Features
Three distinct variants: EmptyState (standard), InlineEmptyState (compact), IllustratedEmptyState (hero)
Smart variant selection via decision tree (prominence + space)
Five themed variants for IllustratedEmptyState
Flexible action buttons with Button component integration
Full Oracle JET icon library support
Responsive layouts with mobile-first design
💻 Examples
No Search Results
return EmptyState({
icon: 'search',
title: 'No results found',
description: 'Try adjusting your filters',
action: Button({ onclick: () => showToast('Clearing filters') }, 'Clear Filters')
});▶️ Live Preview
No results found
Try adjusting your filters or search criteria
💡 Click "Edit Code" to modify the example
🔄 Click "Apply Changes" to see your modifications
↩️ Click "Reset" to restore original code
Illustrated Empty State
return IllustratedEmptyState({
variant: 'services',
title: 'No services yet',
description: 'Be the first to offer a service',
action: Button({ onclick: () => showToast('Creating service') }, 'Create Service')
});▶️ Live Preview
No services yet
Get started by adding your first item
💡 Click "Edit Code" to modify the example
🔄 Click "Apply Changes" to see your modifications
↩️ Click "Reset" to restore original code
💡 Usage Tips
🔗 Related
Explore vwf
Discover what vwf can do