The no-items component displays a centered placeholder message when a list or collection is empty, with an optional create button for authorized users.
Basic Usage
@if($users->isEmpty())
<x-forms::no-items
model-type="users"
create-action="{{ route('users.create') }}"
/>
@endif
Custom Messages
Override the default title and message:
<x-forms::no-items
title="No products found"
message="Start by adding your first product to the catalog."
create-action="{{ route('products.create') }}"
/>
Custom Icon
Change the icon displayed:
<x-forms::no-items
icon="fas fa-inbox"
model-type="messages"
create-action="{{ route('messages.create') }}"
/>
<x-forms::no-items
:model="App\Models\Post::class"
model-type="posts"
create-action="{{ route('posts.create') }}"
/>
auth()->user()->can('create', $model) returns true.
Manually control whether the create button is shown:
<x-forms::no-items
model-type="orders"
create-action="{{ route('orders.create') }}"
:show-create="false"
/>
<x-forms::no-items
title="No team members yet"
message="Invite your team members to collaborate."
>
<a href="{{ route('team.invite') }}" class="btn btn-primary btn-lg">
<i class="fas fa-user-plus me-2"></i> Invite Team Member
</a>
</x-forms::no-items>
<x-forms::no-items
title="All caught up!"
message="You have no pending notifications."
:show-create="false"
/>
Different Model Types
<!-- For resources -->
<x-forms::no-items model-type="articles" create-action="{{ route('articles.create') }}" />
<!-- For entities -->
<x-forms::no-items model-type="customers" create-action="{{ route('customers.create') }}" />
<!-- For records -->
<x-forms::no-items model-type="invoices" create-action="{{ route('invoices.create') }}" />
Attributes
The URL for the create action button
model
string|object
default:"null"
The model class or instance used for authorization checks. When provided, the create button only shows if the user has create permission
The CSS class for the icon to display. If not provided, uses the framework’s default no-items icon
The name of the model type (e.g., “users”, “posts”) used in the default message
Explicitly control whether to show the create button. When null, determined by user permissions on the model
The title text. Defaults to “It’s a bit lonely here.”
The message text. Defaults to “Let’s create some new :model_type.”
The CSS framework to use for rendering
Default Behavior
Default Title
If no title is provided, displays: “It’s a bit lonely here.”
Default Message
If no message is provided, displays: “Let’s create some new :model_type.” where :model_type is replaced with the modelType attribute or “items” if not specified.
Default Icon
Uses the framework’s configured no-items-icon setting.
When model is provided and showCreate is null:
- Checks
auth()->user()->can('create', $model)
- Only shows button if check passes
Styling
The component is rendered in a Bootstrap card with centered content:
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<!-- Card with icon, message, and button -->
</div>
</div>
</div>
Examples
Products Listing
@if($products->isEmpty())
<x-forms::no-items
:model="App\Models\Product::class"
model-type="products"
icon="fas fa-box"
create-action="{{ route('products.create') }}"
/>
@else
@foreach($products as $product)
<!-- Product display -->
@endforeach
@endif
Custom Empty State with Multiple Actions
<x-forms::no-items
title="No documents uploaded"
message="Upload your first document to get started."
icon="fas fa-file-upload"
>
<div class="d-flex gap-2 justify-content-center">
<a href="{{ route('documents.upload') }}" class="btn btn-primary btn-lg">
<i class="fas fa-upload me-2"></i> Upload Document
</a>
<a href="{{ route('documents.import') }}" class="btn btn-outline-primary btn-lg">
<i class="fas fa-file-import me-2"></i> Import from Cloud
</a>
</div>
</x-forms::no-items>
Search Results
@if($searchResults->isEmpty())
<x-forms::no-items
title="No results found"
message="Try adjusting your search terms or filters."
icon="fas fa-search"
:show-create="false"
/>
@endif
Filtered List
@if($filteredOrders->isEmpty())
<x-forms::no-items
title="No orders match your filters"
message="Try changing your filter criteria to see more results."
icon="fas fa-filter"
:show-create="false"
/>
@else
<!-- Orders list -->
@endif
Admin Panel with Strict Permissions
@if($reports->isEmpty())
<x-forms::no-items
:model="App\Models\Report::class"
model-type="reports"
icon="fas fa-chart-bar"
create-action="{{ route('admin.reports.create') }}"
title="No reports available"
message="Generate your first report to start tracking analytics."
/>
@endif